diff --git a/.claude/settings.local.json b/.claude/settings.local.json
deleted file mode 100644
index b68cf6cb..00000000
--- a/.claude/settings.local.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm run build:*)",
-      "Bash(npx next lint:*)",
-      "Bash(yarn install)",
-      "Bash(yarn build)",
-      "Bash(yarn build:*)",
-      "Bash(NEXT_TELEMETRY_DISABLED=1 yarn build)",
-      "Bash(find:*)",
-      "Bash(pnpm install:*)",
-      "Bash(pnpm run lint:check:*)",
-      "Bash(git checkout:*)",
-      "Bash(pnpm run:*)",
-      "Bash(pnpm ls:*)",
-      "Bash(node:*)",
-      "Bash(npx tsc:*)",
-      "Bash(pnpm add:*)",
-      "WebFetch(domain:www.heroui.com)",
-      "WebSearch",
-      "Bash(pnpm generate:chainlink:*)",
-      "Bash(pnpm lint:check:*)",
-      "Bash(pnpm exec tsc:*)",
-      "Bash(npx eslint:*)",
-      "Bash(git rm:*)",
-      "Bash(cat:*)",
-      "Bash(timeout 30 pnpm exec tsc --noEmit --pretty)",
-      "Bash(identify:*)",
-      "Bash(sips:*)",
-      "Bash(awk:*)",
-      "Bash(pnpm dlx:*)",
-      "Bash(oracle ask:*)",
-      "Bash(pnpm list:*)",
-      "Bash(pnpm why:*)",
-      "Bash(npx biome:*)",
-      "Bash(timeout 60 npx biome check:*)",
-      "WebFetch(domain:biomejs.dev)",
-      "WebFetch(domain:docs.reown.com)",
-      "Bash(npm view:*)",
-      "Bash(pnpm remove:*)",
-      "Bash(timeout 60 npx tsc:*)",
-      "Bash(tee:*)",
-      "WebFetch(domain:medium.com)",
-      "Bash(pnpm info:*)",
-      "Bash(for file in )",
-      "Bash(timeout 30 npx tsc:*)"
-    ],
-    "deny": []
-  }
-}
diff --git a/.gitignore b/.gitignore
index 6229763c..8e104318 100644
--- a/.gitignore
+++ b/.gitignore
@@ -54,3 +54,5 @@ next-env.d.ts
 CLAUDE.md
 FULLAUTO_CONTEXT.md
 .claude/settings.local.json
+
+.claude/settings.local.json
\ No newline at end of file
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx b/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx
index 2550a307..79f8bf75 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx
@@ -1,11 +1,10 @@
 'use client';
 
+import { useCallback } from 'react';
 import type { Address } from 'viem';
-import { useConnection } from 'wagmi';
-import { Button } from '@/components/ui/button';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import Input from '@/components/Input/Input';
-import AccountConnect from '@/components/layout/header/AccountConnect';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { TokenIcon } from '@/components/TokenIcon';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useVaultV2Deposit } from '@/hooks/useVaultV2Deposit';
@@ -33,7 +32,6 @@ export function DepositToVaultModal({
   onClose,
   onSuccess,
 }: DepositToVaultModalProps): JSX.Element {
-  const { isConnected } = useConnection();
   const [usePermit2Setting] = useLocalStorage('usePermit2', true);
 
   const {
@@ -61,6 +59,14 @@ export function DepositToVaultModal({
     onSuccess,
   });
 
+  const handleDeposit = useCallback(() => {
+    if (!permit2Authorized || (!usePermit2Setting && !isApproved)) {
+      void approveAndDeposit();
+    } else {
+      void signAndDeposit();
+    }
+  }, [permit2Authorized, usePermit2Setting, isApproved, approveAndDeposit, signAndDeposit]);
+
   return (
     <>
       <Modal
@@ -87,55 +93,40 @@ export function DepositToVaultModal({
           onClose={onClose}
         />
         <ModalBody className="gap-6">
-          {isConnected ? (
-            <div className="space-y-4">
-              <div>
-                <div className="flex items-center justify-between">
-                  <span className="opacity-80">Deposit amount</span>
-                  <p className="font-inter text-xs opacity-50">
-                    Balance: {formatBalance(tokenBalance ?? BigInt(0), assetDecimals)} {assetSymbol}
-                  </p>
-                </div>
-
-                <div className="mt-2 flex items-start justify-between">
-                  <div className="relative flex-grow">
-                    <Input
-                      decimals={assetDecimals}
-                      max={tokenBalance ?? BigInt(0)}
-                      setValue={setDepositAmount}
-                      setError={setInputError}
-                      exceedMaxErrMessage="Insufficient Balance"
-                    />
-                    {inputError && <p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">{inputError}</p>}
-                  </div>
+          <div className="space-y-4">
+            <div>
+              <div className="flex items-center justify-between">
+                <span className="opacity-80">Deposit amount</span>
+                <p className="font-inter text-xs opacity-50">
+                  Balance: {formatBalance(tokenBalance ?? BigInt(0), assetDecimals)} {assetSymbol}
+                </p>
+              </div>
 
-                  {!permit2Authorized || (!usePermit2Setting && !isApproved) ? (
-                    <Button
-                      disabled={!isConnected || isLoadingPermit2 || depositPending}
-                      onClick={() => void approveAndDeposit()}
-                      className="ml-2 min-w-32"
-                      variant="primary"
-                    >
-                      Deposit
-                    </Button>
-                  ) : (
-                    <Button
-                      disabled={!isConnected || depositPending || inputError !== null || !depositAmount}
-                      onClick={() => void signAndDeposit()}
-                      className="ml-2 min-w-32"
-                      variant="primary"
-                    >
-                      Deposit
-                    </Button>
-                  )}
+              <div className="mt-2 flex items-start justify-between">
+                <div className="relative grow">
+                  <Input
+                    decimals={assetDecimals}
+                    max={tokenBalance ?? BigInt(0)}
+                    setValue={setDepositAmount}
+                    setError={setInputError}
+                    exceedMaxErrMessage="Insufficient Balance"
+                  />
+                  {inputError && <p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">{inputError}</p>}
                 </div>
+
+                <ExecuteTransactionButton
+                  targetChainId={chainId}
+                  onClick={handleDeposit}
+                  isLoading={isLoadingPermit2 || depositPending}
+                  disabled={inputError !== null || !depositAmount}
+                  variant="primary"
+                  className="ml-2 min-w-32"
+                >
+                  {!permit2Authorized || (!usePermit2Setting && !isApproved) ? 'Approve' : 'Deposit'}
+                </ExecuteTransactionButton>
               </div>
             </div>
-          ) : (
-            <div className="flex justify-center py-4">
-              <AccountConnect />
-            </div>
-          )}
+          </div>
         </ModalBody>
       </Modal>
 
diff --git a/app/autovault/components/deployment/DeploymentModal.tsx b/app/autovault/components/deployment/DeploymentModal.tsx
index 69ae6494..5bc1169c 100644
--- a/app/autovault/components/deployment/DeploymentModal.tsx
+++ b/app/autovault/components/deployment/DeploymentModal.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Checkbox } from '@heroui/react';
 import { FaCube } from 'react-icons/fa';
-import { Button } from '@/components/ui/button';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
-import { Spinner } from '@/components/common/Spinner';
 import { useMarkets } from '@/contexts/MarketsContext';
 import type { UserVaultV2 } from '@/data-sources/subgraph/v2-vaults';
 import { useUserBalances } from '@/hooks/useUserBalances';
@@ -23,7 +22,7 @@ type DeploymentModalContentProps = {
 };
 
 function DeploymentModalContent({ isOpen, onOpenChange, existingVaults }: DeploymentModalContentProps) {
-  const { selectedTokenAndNetwork, needSwitchChain, switchToNetwork, createVault, isDeploying } = useDeployment();
+  const { selectedTokenAndNetwork, createVault, isDeploying } = useDeployment();
 
   // Load balances and tokens at modal level
   const { balances, loading: balancesLoading } = useUserBalances({
@@ -53,6 +52,17 @@ function DeploymentModalContent({ isOpen, onOpenChange, existingVaults }: Deploy
     }
   }, [isOpen]);
 
+  const handleCreateVault = useCallback(() => {
+    void createVault();
+  }, [createVault]);
+
+  const getButtonText = useCallback(() => {
+    if (isDeploying) return 'Deploying...';
+    if (balancesLoading || marketsLoading) return 'Loading...';
+    if (!selectedTokenAndNetwork) return 'Select Asset & Network';
+    return 'Deploy Vault';
+  }, [isDeploying, balancesLoading, marketsLoading, selectedTokenAndNetwork]);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -105,33 +115,16 @@ function DeploymentModalContent({ isOpen, onOpenChange, existingVaults }: Deploy
               )}
 
               <div className="flex justify-end pt-2">
-                <Button
+                <ExecuteTransactionButton
+                  targetChainId={selectedTokenAndNetwork?.networkId ?? 1}
+                  onClick={handleCreateVault}
+                  disabled={!selectedTokenAndNetwork || balancesLoading || marketsLoading || (userAlreadyHasVault && !ackExistingVault)}
+                  isLoading={isDeploying}
                   variant="primary"
-                  onClick={needSwitchChain ? switchToNetwork : () => void createVault()}
-                  disabled={
-                    !selectedTokenAndNetwork ||
-                    isDeploying ||
-                    balancesLoading ||
-                    marketsLoading ||
-                    (userAlreadyHasVault && !ackExistingVault)
-                  }
                   className="min-w-[140px]"
                 >
-                  {isDeploying ? (
-                    <div className="flex items-center gap-2">
-                      <Spinner />
-                      Deploying...
-                    </div>
-                  ) : balancesLoading || marketsLoading ? (
-                    'Loading...'
-                  ) : needSwitchChain && selectedTokenAndNetwork ? (
-                    `Switch to ${getNetworkName(selectedTokenAndNetwork.networkId)}`
-                  ) : selectedTokenAndNetwork ? (
-                    'Deploy Vault'
-                  ) : (
-                    'Select Asset & Network'
-                  )}
-                </Button>
+                  {getButtonText()}
+                </ExecuteTransactionButton>
               </div>
             </div>
           </div>
diff --git a/app/positions/components/RebalanceModal.tsx b/app/positions/components/RebalanceModal.tsx
index 028f9ef3..add6b8eb 100644
--- a/app/positions/components/RebalanceModal.tsx
+++ b/app/positions/components/RebalanceModal.tsx
@@ -6,8 +6,8 @@ import { MarketSelectionModal } from '@/components/common/MarketSelectionModal';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
 import { Spinner } from '@/components/common/Spinner';
 import { TokenIcon } from '@/components/TokenIcon';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { useMarkets } from '@/hooks/useMarkets';
 import { useRebalance } from '@/hooks/useRebalance';
 import { useStyledToast } from '@/hooks/useStyledToast';
@@ -110,7 +110,7 @@ export function RebalanceModal({ groupedPosition, isOpen, onOpenChange, refetch,
       return false;
     }
     return true;
-  }, [selectedFromMarketUniqueKey, amount, groupedPosition.loanAssetDecimals, getPendingDelta, toast]);
+  }, [selectedFromMarketUniqueKey, amount, groupedPosition.loanAssetDecimals, getPendingDelta, toast, groupedPosition.markets]);
 
   const createAction = useCallback((fromMarket: Market, toMarket: Market, actionAmount: bigint, isMax: boolean): RebalanceAction => {
     return {
@@ -194,40 +194,25 @@ export function RebalanceModal({ groupedPosition, isOpen, onOpenChange, refetch,
     resetSelections,
   ]);
 
-  // Use the market network hook for chain switching with direct chainId
-  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
-    targetChainId: groupedPosition.chainId,
-  });
-
-  const handleExecuteRebalance = useCallback(async () => {
-    if (needSwitchChain) {
+  const handleExecuteRebalance = useCallback(() => {
+    void (async () => {
+      setShowProcessModal(true);
       try {
-        // Call our switchToNetwork function
-        switchToNetwork();
-        // Wait a bit for the network switch to complete
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      } catch (_error) {
-        toast.error('Something went wrong', 'Failed to switch network. Please try again');
-        return;
-      }
-    }
+        const result = await executeRebalance();
+        // Explicitly refetch AFTER successful execution
 
-    setShowProcessModal(true);
-    try {
-      const result = await executeRebalance();
-      // Explicitly refetch AFTER successful execution
-
-      if (result == true) {
-        refetch(() => {
-          toast.info('Data refreshed', 'Position data updated after rebalance.');
-        });
+        if (result === true) {
+          refetch(() => {
+            toast.info('Data refreshed', 'Position data updated after rebalance.');
+          });
+        }
+      } catch (error) {
+        console.error('Error during rebalance:', error);
+      } finally {
+        setShowProcessModal(false);
       }
-    } catch (error) {
-      console.error('Error during rebalance:', error);
-    } finally {
-      setShowProcessModal(false);
-    }
-  }, [executeRebalance, needSwitchChain, switchToNetwork, toast, refetch]);
+    })();
+  }, [executeRebalance, toast, refetch]);
 
   const handleManualRefresh = () => {
     refetch(() => {
@@ -319,15 +304,16 @@ export function RebalanceModal({ groupedPosition, isOpen, onOpenChange, refetch,
           >
             Cancel
           </Button>
-          <Button
-            variant="primary"
-            onClick={() => void handleExecuteRebalance()}
-            disabled={isProcessing || rebalanceActions.length === 0}
+          <ExecuteTransactionButton
+            targetChainId={groupedPosition.chainId}
+            onClick={handleExecuteRebalance}
+            disabled={rebalanceActions.length === 0}
             isLoading={isProcessing}
+            variant="primary"
             className="rounded-sm p-4 px-10 font-zen text-white duration-200 ease-in-out hover:scale-105 disabled:opacity-50"
           >
-            {needSwitchChain ? 'Switch Network & Execute' : 'Execute Rebalance'}
-          </Button>
+            Execute Rebalance
+          </ExecuteTransactionButton>
         </ModalFooter>
       </Modal>
       {showProcessModal && (
diff --git a/app/positions/components/onboarding/SetupPositions.tsx b/app/positions/components/onboarding/SetupPositions.tsx
index 32fb7f61..1dc8f7c1 100644
--- a/app/positions/components/onboarding/SetupPositions.tsx
+++ b/app/positions/components/onboarding/SetupPositions.tsx
@@ -4,11 +4,11 @@ import { LockClosedIcon, LockOpen1Icon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import { formatUnits, parseUnits } from 'viem';
 import { Button } from '@/components/ui/button';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import Input from '@/components/Input/Input';
 import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/components/MarketIdentity';
 import { SupplyProcessModal } from '@/components/SupplyProcessModal';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { useMultiMarketSupply } from '@/hooks/useMultiMarketSupply';
 import { useRateLabel } from '@/hooks/useRateLabel';
 import { useStyledToast } from '@/hooks/useStyledToast';
@@ -31,11 +31,6 @@ export function SetupPositions() {
   const [error, setError] = useState<string | null>(null);
   const [isSupplying, setIsSupplying] = useState(false);
 
-  // Use our custom hook for network switching
-  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
-    targetChainId: selectedToken?.network ?? SupportedNetworks.Base,
-  });
-
   // Compute token balance and decimals
   const tokenBalance = useMemo(() => {
     if (!selectedToken) return 0n;
@@ -190,32 +185,24 @@ export function SetupPositions() {
     goToNextStep,
   );
 
-  const handleSupply = async () => {
-    if (isSupplying) {
-      toast.info('Loading', 'Supplying in progress');
-      return;
-    }
+  const handleSupply = useCallback(() => {
+    void (async () => {
+      if (isSupplying) {
+        toast.info('Loading', 'Supplying in progress');
+        return;
+      }
+
+      setIsSupplying(true);
 
-    if (needSwitchChain && selectedToken) {
       try {
-        switchToNetwork();
-        // Wait for network switch to complete
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      } catch (_switchError) {
-        toast.error('Failed to switch network', 'Please try again');
-        return;
+        // trigger the tx. goToNextStep() be called as a `onSuccess` callback
+        await approveAndSupply();
+      } catch (_supplyError) {
+      } finally {
+        setIsSupplying(false);
       }
-    }
-    setIsSupplying(true);
-
-    try {
-      // trigger the tx. goToNextStep() be called as a `onSuccess` callback
-      await approveAndSupply();
-    } catch (_supplyError) {
-    } finally {
-      setIsSupplying(false);
-    }
-  };
+    })();
+  }, [isSupplying, toast, approveAndSupply]);
 
   if (!selectedToken || !selectedMarkets || selectedMarkets.length === 0) {
     return null;
@@ -379,15 +366,16 @@ export function SetupPositions() {
         >
           Back
         </Button>
-        <Button
-          variant="primary"
+        <ExecuteTransactionButton
+          targetChainId={selectedToken?.network ?? SupportedNetworks.Base}
+          onClick={handleSupply}
           disabled={error !== null || totalAmountBigInt === 0n || supplies.length === 0}
           isLoading={supplyPending || isLoadingPermit2}
-          onClick={() => void handleSupply()}
+          variant="primary"
           className="min-w-[120px]"
         >
           Execute
-        </Button>
+        </ExecuteTransactionButton>
       </div>
     </div>
   );
diff --git a/app/rewards/components/RewardTable.tsx b/app/rewards/components/RewardTable.tsx
index da812e5c..11ec1421 100644
--- a/app/rewards/components/RewardTable.tsx
+++ b/app/rewards/components/RewardTable.tsx
@@ -1,20 +1,20 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@heroui/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import type { Address } from 'viem';
 import { useConnection } from 'wagmi';
 import { Button } from '@/components/ui/button';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { TokenIcon } from '@/components/TokenIcon';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import type { DistributionResponseType } from '@/hooks/useRewards';
 import { useStyledToast } from '@/hooks/useStyledToast';
 import { useTransactionWithToast } from '@/hooks/useTransactionWithToast';
 import { formatBalance, formatSimple } from '@/utils/balance';
 import { getAssetURL } from '@/utils/external';
-import { getNetworkImg, SupportedNetworks } from '@/utils/networks';
+import { getNetworkImg } from '@/utils/networks';
 import { findToken } from '@/utils/tokens';
 import type { AggregatedRewardType } from '@/utils/types';
 
@@ -28,15 +28,6 @@ type RewardTableProps = {
 export default function RewardTable({ rewards, distributions, account, showClaimed }: RewardTableProps) {
   const { chainId } = useConnection();
   const toast = useStyledToast();
-  const [targetChainId, setTargetChainId] = useState<number>(chainId ?? SupportedNetworks.Mainnet);
-
-  // Use our custom hook for network switching
-  const { switchToNetwork } = useMarketNetwork({
-    targetChainId,
-    onNetworkSwitched: () => {
-      // Additional actions after network switch if needed
-    },
-  });
 
   const { sendTransaction } = useTransactionWithToast({
     toastId: 'claim',
@@ -61,6 +52,26 @@ export default function RewardTable({ rewards, distributions, account, showClaim
     [rewards, showClaimed],
   );
 
+  const handleClaim = useCallback(
+    (distribution: DistributionResponseType | undefined) => {
+      if (!account) {
+        toast.error('No account connected', 'Please connect your wallet to continue.');
+        return;
+      }
+      if (!distribution) {
+        toast.error('No claim data', 'No claim data found for this reward please try again later.');
+        return;
+      }
+      sendTransaction({
+        account: account as Address,
+        to: distribution.distributor.address as Address,
+        data: distribution.tx_data as `0x${string}`,
+        chainId: distribution.distributor.chain_id,
+      });
+    },
+    [account, toast, sendTransaction],
+  );
+
   return (
     <div className="mt-4 gap-8">
       <div className="bg-surface mb-6 mt-2">
@@ -202,39 +213,15 @@ export default function RewardTable({ rewards, distributions, account, showClaim
                             </Button>
                           </Link>
                         ) : (
-                          <Button
+                          <ExecuteTransactionButton
+                            targetChainId={distribution?.distributor.chain_id ?? 1}
+                            onClick={() => handleClaim(distribution)}
                             variant="surface"
                             size="sm"
                             disabled={tokenReward.total.claimable === BigInt(0) || distribution === undefined}
-                            onClick={() => {
-                              void (async () => {
-                                if (!account) {
-                                  toast.error('No account connected', 'Please connect your wallet to continue.');
-                                  return;
-                                }
-                                if (!distribution) {
-                                  toast.error('No claim data', 'No claim data found for this reward please try again later.');
-                                  return;
-                                }
-                                if (chainId !== distribution.distributor.chain_id) {
-                                  // Set the target chain ID and switch
-                                  setTargetChainId(distribution.distributor.chain_id);
-                                  switchToNetwork();
-                                  // Wait for network switch
-                                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                                }
-                                sendTransaction({
-                                  account: account as Address,
-                                  to: distribution.distributor.address as Address,
-                                  data: distribution.tx_data as `0x${string}`,
-                                  chainId: distribution.distributor.chain_id,
-                                  // allow estimating gas
-                                });
-                              })();
-                            }}
                           >
                             Claim
-                          </Button>
+                          </ExecuteTransactionButton>
                         )}
                       </div>
                     </TableCell>
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index 0e2351ef..5ebf92fa 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -194,6 +194,55 @@ const vault = getVaultByAddress(vaultAddress, chainId);
 **Vault data source**: `src/data-sources/morpho-api/vaults.ts`
 
 
+---
+
+## Transaction Pattern
+
+**ExecuteTransactionButton** handles wallet connection + chain switching automatically.
+
+**Standard Pattern**:
+```typescript
+// 1. Transaction hook (approval + execution logic)
+const { approveAndExecute, signAndExecute, isLoading } = useXTransaction({ ... });
+
+// 2. Named callback with useCallback
+const handleExecute = useCallback(() => {
+  if (!isApproved) {
+    void approveAndExecute();
+  } else {
+    void signAndExecute();
+  }
+}, [isApproved, approveAndExecute, signAndExecute]);
+
+// 3. ExecuteTransactionButton (handles connection/chain switching)
+<ExecuteTransactionButton
+  targetChainId={chainId}
+  onClick={handleExecute}
+  isLoading={isLoading}
+  disabled={!amount}
+>
+  Execute
+</ExecuteTransactionButton>
+```
+
+**Dynamic Button Text**:
+```typescript
+const getButtonText = () => {
+  if (isDeploying) return 'Deploying...';
+  if (!ready) return 'Select Item';
+  return 'Execute';
+};
+
+<ExecuteTransactionButton onClick={handleExecute}>
+  {getButtonText()}
+</ExecuteTransactionButton>
+```
+
+**Rules**:
+- Always use `useCallback` for onClick handlers
+- Never put complex logic directly in `onClick`
+- Button shows "Connect Wallet" / "Switch Chain" / action text automatically
+
 ---
 
 ## Key Directories
diff --git a/src/components/Borrow/AddCollateralAndBorrow.tsx b/src/components/Borrow/AddCollateralAndBorrow.tsx
index a686a347..82c90c1f 100644
--- a/src/components/Borrow/AddCollateralAndBorrow.tsx
+++ b/src/components/Borrow/AddCollateralAndBorrow.tsx
@@ -1,21 +1,18 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Switch } from '@heroui/react';
 import { ReloadIcon } from '@radix-ui/react-icons';
-import { useConnection } from 'wagmi';
-import { Button } from '@/components/ui/button';
 import { LTVWarning } from '@/components/common/LTVWarning';
 import { MarketDetailsBlock } from '@/components/common/MarketDetailsBlock';
 import Input from '@/components/Input/Input';
-import AccountConnect from '@/components/layout/header/AccountConnect';
 import { useBorrowTransaction } from '@/hooks/useBorrowTransaction';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { formatBalance, formatReadable } from '@/utils/balance';
 import { getNativeTokenSymbol } from '@/utils/networks';
 import { isWrappedNativeToken } from '@/utils/tokens';
 import type { Market, MarketPosition } from '@/utils/types';
 import { BorrowProcessModal } from '../BorrowProcessModal';
 import { TokenIcon } from '../TokenIcon';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { getLTVColor, getLTVProgressColor } from './helpers';
 
 type BorrowLogicProps = {
@@ -44,8 +41,6 @@ export function AddCollateralAndBorrow({
   const [borrowInputError, setBorrowInputError] = useState<string | null>(null);
   const [usePermit2Setting] = useLocalStorage('usePermit2', true);
 
-  const { isConnected } = useConnection();
-
   // lltv with 18 decimals
   const lltv = BigInt(market.lltv);
 
@@ -53,11 +48,6 @@ export function AddCollateralAndBorrow({
   const [currentLTV, setCurrentLTV] = useState<bigint>(BigInt(0));
   const [newLTV, setNewLTV] = useState<bigint>(BigInt(0));
 
-  // Use the market network hook for chain switching
-  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
-    targetChainId: market.morphoBlue.chain.id,
-  });
-
   // Use the new hook for borrow transaction logic
   const {
     currentStep,
@@ -78,6 +68,14 @@ export function AddCollateralAndBorrow({
     onSuccess,
   });
 
+  const handleBorrow = useCallback(() => {
+    if ((!permit2Authorized && !useEth) || (!usePermit2Setting && !isApproved)) {
+      void approveAndBorrow();
+    } else {
+      void signAndBorrow();
+    }
+  }, [permit2Authorized, useEth, usePermit2Setting, isApproved, approveAndBorrow, signAndBorrow]);
+
   // Calculate current and new LTV whenever relevant values change
   useEffect(() => {
     if (currentPosition) {
@@ -238,129 +236,94 @@ export function AddCollateralAndBorrow({
             />
           </div>
 
-          {isConnected && (
-            <div className="mt-12 space-y-4">
-              {/* Collateral Input Section */}
-              <div className="mb-1">
-                <div className="flex items-center justify-between">
-                  <p className="font text-sm">Add Collateral</p>
-                  <p className="font text-xs opacity-50">
-                    Balance:{' '}
-                    {useEth
-                      ? formatBalance(ethBalance ? ethBalance : '0', 18)
-                      : formatBalance(collateralTokenBalance ? collateralTokenBalance : '0', market.collateralAsset.decimals)}{' '}
-                    {useEth ? getNativeTokenSymbol(market.morphoBlue.chain.id) : market.collateralAsset.symbol}
-                  </p>
-                </div>
+          <div className="mt-12 space-y-4">
+            {/* Collateral Input Section */}
+            <div className="mb-1">
+              <div className="flex items-center justify-between">
+                <p className="font text-sm">Add Collateral</p>
+                <p className="font text-xs opacity-50">
+                  Balance:{' '}
+                  {useEth
+                    ? formatBalance(ethBalance ? ethBalance : '0', 18)
+                    : formatBalance(collateralTokenBalance ? collateralTokenBalance : '0', market.collateralAsset.decimals)}{' '}
+                  {useEth ? getNativeTokenSymbol(market.morphoBlue.chain.id) : market.collateralAsset.symbol}
+                </p>
+              </div>
 
-                {isWrappedNativeToken(market.collateralAsset.address, market.morphoBlue.chain.id) && (
-                  <div className="mb-2 mt-1 flex items-center justify-end">
-                    <div className="mr-2 font text-xs opacity-50">Use {getNativeTokenSymbol(market.morphoBlue.chain.id)} instead</div>
-                    <Switch
-                      size="sm"
-                      isSelected={useEth}
-                      onValueChange={setUseEth}
-                      classNames={{
-                        wrapper: 'w-9 h-4 mr-0',
-                        thumb: 'w-3 h-3',
-                      }}
-                    />
-                  </div>
-                )}
+              {isWrappedNativeToken(market.collateralAsset.address, market.morphoBlue.chain.id) && (
+                <div className="mb-2 mt-1 flex items-center justify-end">
+                  <div className="mr-2 font text-xs opacity-50">Use {getNativeTokenSymbol(market.morphoBlue.chain.id)} instead</div>
+                  <Switch
+                    size="sm"
+                    isSelected={useEth}
+                    onValueChange={setUseEth}
+                    classNames={{
+                      wrapper: 'w-9 h-4 mr-0',
+                      thumb: 'w-3 h-3',
+                    }}
+                  />
+                </div>
+              )}
 
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="relative flex-grow">
-                    <Input
-                      decimals={market.collateralAsset.decimals}
-                      max={useEth ? ethBalance : collateralTokenBalance}
-                      setValue={setCollateralAmount}
-                      setError={setCollateralInputError}
-                      exceedMaxErrMessage="Insufficient Balance"
-                      value={collateralAmount}
-                    />
-                    {collateralInputError && <p className="p-1 text-sm text-red-500">{collateralInputError}</p>}
-                  </div>
+              <div className="mb-4 flex items-start justify-between">
+                <div className="relative flex-grow">
+                  <Input
+                    decimals={market.collateralAsset.decimals}
+                    max={useEth ? ethBalance : collateralTokenBalance}
+                    setValue={setCollateralAmount}
+                    setError={setCollateralInputError}
+                    exceedMaxErrMessage="Insufficient Balance"
+                    value={collateralAmount}
+                  />
+                  {collateralInputError && <p className="p-1 text-sm text-red-500">{collateralInputError}</p>}
                 </div>
               </div>
+            </div>
 
-              {/* Borrow Input Section */}
-              <div className="mb-1">
-                <div className="flex items-center justify-between">
-                  <p className="font text-sm">Borrow </p>
-                  <p className="font text-xs opacity-50">
-                    Available: {formatReadable(formatBalance(market.state.liquidityAssets, market.loanAsset.decimals))}{' '}
-                    {market.loanAsset.symbol}
-                  </p>
-                </div>
+            {/* Borrow Input Section */}
+            <div className="mb-1">
+              <div className="flex items-center justify-between">
+                <p className="font text-sm">Borrow </p>
+                <p className="font text-xs opacity-50">
+                  Available: {formatReadable(formatBalance(market.state.liquidityAssets, market.loanAsset.decimals))}{' '}
+                  {market.loanAsset.symbol}
+                </p>
+              </div>
 
-                <div className="mb-4 flex items-start justify-between">
-                  <div className="relative flex-grow">
-                    <Input
-                      decimals={market.loanAsset.decimals}
-                      setValue={setBorrowAmount}
-                      setError={setBorrowInputError}
-                      exceedMaxErrMessage="Exceeds available liquidity"
-                      value={borrowAmount}
-                    />
-                    {borrowInputError && <p className="p-1 text-sm text-red-500">{borrowInputError}</p>}
-                  </div>
+              <div className="mb-4 flex items-start justify-between">
+                <div className="relative grow">
+                  <Input
+                    decimals={market.loanAsset.decimals}
+                    setValue={setBorrowAmount}
+                    setError={setBorrowInputError}
+                    exceedMaxErrMessage="Exceeds available liquidity"
+                    value={borrowAmount}
+                    max={BigInt(market.state.liquidityAssets)}
+                  />
+                  {borrowInputError && <p className="p-1 text-sm text-red-500">{borrowInputError}</p>}
                 </div>
               </div>
             </div>
-          )}
+          </div>
 
           {/* Action Button */}
           <div className="mt-4">
             <div className="flex justify-end">
-              {isConnected ? (
-                needSwitchChain ? (
-                  <Button
-                    onClick={switchToNetwork}
-                    className="min-w-32"
-                    variant="surface"
-                  >
-                    Switch Chain
-                  </Button>
-                ) : (!permit2Authorized && !useEth) || (!usePermit2Setting && !isApproved) ? (
-                  <Button
-                    disabled={
-                      !isConnected ||
-                      isLoadingPermit2 ||
-                      borrowPending ||
-                      collateralInputError !== null ||
-                      borrowInputError !== null ||
-                      collateralAmount === BigInt(0) ||
-                      borrowAmount === BigInt(0) ||
-                      newLTV >= lltv
-                    }
-                    onClick={() => void approveAndBorrow()}
-                    className="min-w-32"
-                    variant="primary"
-                  >
-                    Approve and Borrow
-                  </Button>
-                ) : (
-                  <Button
-                    disabled={
-                      !isConnected ||
-                      borrowPending ||
-                      collateralInputError !== null ||
-                      borrowInputError !== null ||
-                      (collateralAmount === BigInt(0) && borrowAmount === BigInt(0)) ||
-                      newLTV >= lltv
-                    }
-                    onClick={() => void signAndBorrow()}
-                    className="min-w-32"
-                    variant="primary"
-                  >
-                    {collateralAmount > 0n && borrowAmount == 0n ? 'Add Collateral' : 'Borrow'}
-                  </Button>
-                )
-              ) : (
-                <div>
-                  <AccountConnect />
-                </div>
-              )}
+              <ExecuteTransactionButton
+                targetChainId={market.morphoBlue.chain.id}
+                onClick={handleBorrow}
+                isLoading={isLoadingPermit2 || borrowPending}
+                disabled={
+                  collateralInputError !== null ||
+                  borrowInputError !== null ||
+                  (collateralAmount === BigInt(0) && borrowAmount === BigInt(0)) ||
+                  newLTV >= lltv
+                }
+                variant="primary"
+                className="min-w-32"
+              >
+                {collateralAmount > 0n && borrowAmount === 0n ? 'Add Collateral' : 'Borrow'}
+              </ExecuteTransactionButton>
             </div>
             {(borrowAmount > 0n || collateralAmount > 0n) && (
               <>
diff --git a/src/components/Borrow/WithdrawCollateralAndRepay.tsx b/src/components/Borrow/WithdrawCollateralAndRepay.tsx
index aa45ea37..1e265496 100644
--- a/src/components/Borrow/WithdrawCollateralAndRepay.tsx
+++ b/src/components/Borrow/WithdrawCollateralAndRepay.tsx
@@ -1,17 +1,14 @@
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { ReloadIcon } from '@radix-ui/react-icons';
-import { useConnection } from 'wagmi';
-import { Button } from '@/components/ui/button';
 import { LTVWarning } from '@/components/common/LTVWarning';
 import Input from '@/components/Input/Input';
-import AccountConnect from '@/components/layout/header/AccountConnect';
 import { RepayProcessModal } from '@/components/RepayProcessModal';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { useRepayTransaction } from '@/hooks/useRepayTransaction';
 import { formatBalance } from '@/utils/balance';
 import type { Market, MarketPosition } from '@/utils/types';
 import { MarketDetailsBlock } from '../common/MarketDetailsBlock';
 import { TokenIcon } from '../TokenIcon';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { getLTVColor, getLTVProgressColor } from './helpers';
 
 type WithdrawCollateralAndRepayProps = {
@@ -44,8 +41,6 @@ export function WithdrawCollateralAndRepay({
   const [withdrawInputError, setWithdrawInputError] = useState<string | null>(null);
   const [repayInputError, setRepayInputError] = useState<string | null>(null);
 
-  const { isConnected } = useConnection();
-
   // lltv with 18 decimals
   const lltv = BigInt(market.lltv);
 
@@ -53,11 +48,6 @@ export function WithdrawCollateralAndRepay({
   const [currentLTV, setCurrentLTV] = useState<bigint>(BigInt(0));
   const [newLTV, setNewLTV] = useState<bigint>(BigInt(0));
 
-  // Use the market network hook for chain switching
-  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
-    targetChainId: market.morphoBlue.chain.id,
-  });
-
   // Use the repay transaction hook
   const {
     currentStep,
@@ -78,6 +68,14 @@ export function WithdrawCollateralAndRepay({
     onSuccess,
   });
 
+  const handleRepay = useCallback(() => {
+    if (!isApproved && !permit2Authorized) {
+      void approveAndRepay();
+    } else {
+      void signAndRepay();
+    }
+  }, [isApproved, permit2Authorized, approveAndRepay, signAndRepay]);
+
   // if max is clicked, set the repayShares to max shares
   const setShareToMax = useCallback(() => {
     if (currentPosition) {
@@ -242,58 +240,55 @@ export function WithdrawCollateralAndRepay({
           />
         </div>
 
-        {isConnected && (
-          <div className="mt-12 space-y-4">
-            {/* Withdraw Input Section */}
-            <div className="mb-1">
-              <div className="flex items-center justify-between">
-                <p className="font-inter text-sm">Withdraw Collateral</p>
-                <p className="font-inter text-xs opacity-50">
-                  Available: {formatBalance(BigInt(currentPosition?.state.collateral ?? 0), market.collateralAsset.decimals)}{' '}
-                  {market.collateralAsset.symbol}
-                </p>
-              </div>
+        <div className="mt-12 space-y-4">
+          {/* Withdraw Input Section */}
+          <div className="mb-1">
+            <div className="flex items-center justify-between">
+              <p className="font-inter text-sm">Withdraw Collateral</p>
+              <p className="font-inter text-xs opacity-50">
+                Available: {formatBalance(BigInt(currentPosition?.state.collateral ?? 0), market.collateralAsset.decimals)}{' '}
+                {market.collateralAsset.symbol}
+              </p>
+            </div>
 
-              <div className="mb-4 flex items-start justify-between">
-                <div className="relative flex-grow">
-                  <Input
-                    decimals={market.collateralAsset.decimals}
-                    max={BigInt(currentPosition?.state.collateral ?? 0)}
-                    setValue={setWithdrawAmount}
-                    setError={setWithdrawInputError}
-                    exceedMaxErrMessage="Exceeds current collateral"
-                  />
-                  {withdrawInputError && <p className="p-1 text-sm text-red-500">{withdrawInputError}</p>}
-                </div>
+            <div className="mb-4 flex items-start justify-between">
+              <div className="relative flex-grow">
+                <Input
+                  decimals={market.collateralAsset.decimals}
+                  max={BigInt(currentPosition?.state.collateral ?? 0)}
+                  setValue={setWithdrawAmount}
+                  setError={setWithdrawInputError}
+                  exceedMaxErrMessage="Exceeds current collateral"
+                />
+                {withdrawInputError && <p className="p-1 text-sm text-red-500">{withdrawInputError}</p>}
               </div>
             </div>
+          </div>
 
-            {/* Repay Input Section */}
-            <div className="mb-1">
-              <div className="flex items-center justify-between">
-                <p className="font-inter text-sm">Repay Loan</p>
-                <p className="font-inter text-xs opacity-50">
-                  Debt: {formatBalance(BigInt(currentPosition?.state.borrowAssets ?? 0), market.loanAsset.decimals)}{' '}
-                  {market.loanAsset.symbol}
-                </p>
-              </div>
+          {/* Repay Input Section */}
+          <div className="mb-1">
+            <div className="flex items-center justify-between">
+              <p className="font-inter text-sm">Repay Loan</p>
+              <p className="font-inter text-xs opacity-50">
+                Debt: {formatBalance(BigInt(currentPosition?.state.borrowAssets ?? 0), market.loanAsset.decimals)} {market.loanAsset.symbol}
+              </p>
+            </div>
 
-              <div className="mb-4 flex items-start justify-between">
-                <div className="relative flex-grow">
-                  <Input
-                    decimals={market.loanAsset.decimals}
-                    max={maxToRepay}
-                    setValue={setRepayAssets}
-                    setError={setRepayInputError}
-                    exceedMaxErrMessage="Exceeds current debt or insufficient balance"
-                    onMaxClick={setShareToMax}
-                  />
-                  {repayInputError && <p className="p-1 text-sm text-red-500">{repayInputError}</p>}
-                </div>
+            <div className="mb-4 flex items-start justify-between">
+              <div className="relative flex-grow">
+                <Input
+                  decimals={market.loanAsset.decimals}
+                  max={maxToRepay}
+                  setValue={setRepayAssets}
+                  setError={setRepayInputError}
+                  exceedMaxErrMessage="Exceeds current debt or insufficient balance"
+                  onMaxClick={setShareToMax}
+                />
+                {repayInputError && <p className="p-1 text-sm text-red-500">{repayInputError}</p>}
               </div>
             </div>
           </div>
-        )}
+        </div>
 
         {/* Action Button */}
         <div className="mt-4">
@@ -301,50 +296,21 @@ export function WithdrawCollateralAndRepay({
             className="flex justify-end"
             style={{ zIndex: 1 }}
           >
-            {isConnected ? (
-              needSwitchChain ? (
-                <Button
-                  onClick={switchToNetwork}
-                  className="min-w-32"
-                  variant="surface"
-                >
-                  Switch Chain
-                </Button>
-              ) : (
-                <Button
-                  disabled={
-                    !isConnected ||
-                    repayPending ||
-                    withdrawInputError !== null ||
-                    repayInputError !== null ||
-                    (withdrawAmount === BigInt(0) && repayAssets === BigInt(0)) ||
-                    newLTV >= lltv ||
-                    isLoadingPermit2
-                  }
-                  onClick={() => {
-                    if (!isApproved && !permit2Authorized) {
-                      void approveAndRepay();
-                    } else {
-                      void signAndRepay();
-                    }
-                  }}
-                  className="min-w-32"
-                  variant="primary"
-                >
-                  {isLoadingPermit2
-                    ? 'Loading...'
-                    : !isApproved && !permit2Authorized
-                      ? 'Approve & Repay'
-                      : withdrawAmount > 0
-                        ? 'Withdraw & Repay'
-                        : 'Repay'}
-                </Button>
-              )
-            ) : (
-              <div>
-                <AccountConnect />
-              </div>
-            )}
+            <ExecuteTransactionButton
+              targetChainId={market.morphoBlue.chain.id}
+              onClick={handleRepay}
+              isLoading={repayPending || isLoadingPermit2}
+              disabled={
+                withdrawInputError !== null ||
+                repayInputError !== null ||
+                (withdrawAmount === BigInt(0) && repayAssets === BigInt(0)) ||
+                newLTV >= lltv
+              }
+              variant="primary"
+              className="min-w-32"
+            >
+              {!isApproved && !permit2Authorized ? 'Approve & Repay' : withdrawAmount > 0 ? 'Withdraw & Repay' : 'Repay'}
+            </ExecuteTransactionButton>
           </div>
           {(withdrawAmount > 0n || repayAssets > 0n) && (
             <>
diff --git a/src/components/SupplyModalContent.tsx b/src/components/SupplyModalContent.tsx
index bfc9e823..f989f78e 100644
--- a/src/components/SupplyModalContent.tsx
+++ b/src/components/SupplyModalContent.tsx
@@ -1,17 +1,14 @@
 import { useCallback } from 'react';
 import { Switch } from '@heroui/react';
 import { ReloadIcon } from '@radix-ui/react-icons';
-import { useConnection } from 'wagmi';
 import Input from '@/components/Input/Input';
-import AccountConnect from '@/components/layout/header/AccountConnect';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { useSupplyMarket } from '@/hooks/useSupplyMarket';
 import { formatBalance } from '@/utils/balance';
 import { getNativeTokenSymbol } from '@/utils/networks';
 import { isWrappedNativeToken } from '@/utils/tokens';
 import type { Market } from '@/utils/types';
-import { Button } from '@/components/ui/button';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import { SupplyProcessModal } from './SupplyProcessModal';
 
 type SupplyModalContentProps = {
@@ -23,7 +20,6 @@ type SupplyModalContentProps = {
 
 export function SupplyModalContent({ onClose, market, refetch, onAmountChange }: SupplyModalContentProps): JSX.Element {
   const [usePermit2Setting] = useLocalStorage('usePermit2', true);
-  const { isConnected } = useConnection();
 
   const onSuccess = useCallback(() => {
     onClose();
@@ -61,10 +57,14 @@ export function SupplyModalContent({ onClose, market, refetch, onAmountChange }:
     [setSupplyAmount, onAmountChange],
   );
 
-  // Use the market network hook to handle network switching
-  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
-    targetChainId: market.morphoBlue.chain.id,
-  });
+  // Handle supply execution
+  const handleSupply = useCallback(() => {
+    if ((!permit2Authorized && !useEth) || (!usePermit2Setting && !isApproved)) {
+      void approveAndSupply();
+    } else {
+      void signAndSupply();
+    }
+  }, [permit2Authorized, useEth, usePermit2Setting, isApproved, approveAndSupply, signAndSupply]);
 
   return (
     <>
@@ -80,107 +80,82 @@ export function SupplyModalContent({ onClose, market, refetch, onAmountChange }:
       )}
       {!showProcessModal && (
         <div className="flex flex-col">
-          {isConnected ? (
-            <>
-              {/* Supply Input Section */}
-              <div className="mt-12 space-y-4">
-                {isWrappedNativeToken(market.loanAsset.address, market.morphoBlue.chain.id) && (
-                  <div className="flex items-center justify-end gap-2">
-                    <div className="font-inter text-xs opacity-50">Use {getNativeTokenSymbol(market.morphoBlue.chain.id)} instead</div>
-                    <Switch
-                      size="sm"
-                      isSelected={useEth}
-                      onValueChange={setUseEth}
-                      classNames={{
-                        wrapper: 'w-9 h-4 mr-0',
-                        thumb: 'w-3 h-3',
-                      }}
-                    />
-                  </div>
-                )}
-
-                <div>
-                  <div className="flex items-center justify-between">
-                    <span className="opacity-80">Supply amount</span>
-                    <div className="flex items-center gap-1.5">
-                      <p className="font-inter text-xs opacity-50">
-                        Balance:{' '}
-                        {useEth
-                          ? formatBalance(ethBalance ?? BigInt(0), 18)
-                          : formatBalance(tokenBalance ?? BigInt(0), market.loanAsset.decimals)}{' '}
-                        {useEth ? getNativeTokenSymbol(market.morphoBlue.chain.id) : market.loanAsset.symbol}
-                      </p>
-                      <button
-                        type="button"
-                        onClick={() => void refetchBalance()}
-                        className="opacity-50 transition hover:opacity-100"
-                        aria-label="Refetch balance"
-                      >
-                        <ReloadIcon className="h-3 w-3" />
-                      </button>
-                    </div>
-                  </div>
+          {/* Supply Input Section */}
+          <div className="mt-12 space-y-4">
+            {isWrappedNativeToken(market.loanAsset.address, market.morphoBlue.chain.id) && (
+              <div className="flex items-center justify-end gap-2">
+                <div className="font-inter text-xs opacity-50">Use {getNativeTokenSymbol(market.morphoBlue.chain.id)} instead</div>
+                <Switch
+                  size="sm"
+                  isSelected={useEth}
+                  onValueChange={setUseEth}
+                  classNames={{
+                    wrapper: 'w-9 h-4 mr-0',
+                    thumb: 'w-3 h-3',
+                  }}
+                />
+              </div>
+            )}
 
-                  <div className="mt-2 flex items-start justify-between">
-                    <div className="relative flex-grow">
-                      <Input
-                        decimals={market.loanAsset.decimals}
-                        max={useEth ? (ethBalance ?? BigInt(0)) : (tokenBalance ?? BigInt(0))}
-                        setValue={handleSupplyAmountChange}
-                        setError={(error: string | null) => {
-                          if (typeof error === 'string' && !error.includes("You don't have any supplied assets")) {
-                            setInputError(error);
-                          } else {
-                            setInputError(null);
-                          }
-                        }}
-                        exceedMaxErrMessage={
-                          supplyAmount && supplyAmount > (useEth ? (ethBalance ?? BigInt(0)) : (tokenBalance ?? BigInt(0)))
-                            ? 'Insufficient Balance'
-                            : undefined
-                        }
-                      />
-                      {inputError && !inputError.includes("You don't have any supplied assets") && (
-                        <p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">{inputError}</p>
-                      )}
-                    </div>
+            <div>
+              <div className="flex items-center justify-between">
+                <span className="opacity-80">Supply amount</span>
+                <div className="flex items-center gap-1.5">
+                  <p className="font-inter text-xs opacity-50">
+                    Balance:{' '}
+                    {useEth
+                      ? formatBalance(ethBalance ?? BigInt(0), 18)
+                      : formatBalance(tokenBalance ?? BigInt(0), market.loanAsset.decimals)}{' '}
+                    {useEth ? getNativeTokenSymbol(market.morphoBlue.chain.id) : market.loanAsset.symbol}
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => void refetchBalance()}
+                    className="opacity-50 transition hover:opacity-100"
+                    aria-label="Refetch balance"
+                  >
+                    <ReloadIcon className="h-3 w-3" />
+                  </button>
+                </div>
+              </div>
 
-                    {needSwitchChain ? (
-                      <Button
-                        onClick={switchToNetwork}
-                        className="ml-2 min-w-32"
-                        variant="default"
-                      >
-                        Switch Chain
-                      </Button>
-                    ) : (!permit2Authorized && !useEth) || (!usePermit2Setting && !isApproved) ? (
-                      <Button
-                        disabled={!isConnected || isLoadingPermit2 || supplyPending}
-                        onClick={() => void approveAndSupply()}
-                        className="ml-2 min-w-32"
-                        variant="primary"
-                      >
-                        Supply
-                      </Button>
-                    ) : (
-                      <Button
-                        disabled={!isConnected || supplyPending || inputError !== null || !supplyAmount}
-                        onClick={() => void signAndSupply()}
-                        className="ml-2 min-w-32"
-                        variant="primary"
-                      >
-                        Supply
-                      </Button>
-                    )}
-                  </div>
+              <div className="mt-2 flex items-start justify-between">
+                <div className="relative flex-grow">
+                  <Input
+                    decimals={market.loanAsset.decimals}
+                    max={useEth ? (ethBalance ?? BigInt(0)) : (tokenBalance ?? BigInt(0))}
+                    setValue={handleSupplyAmountChange}
+                    setError={(error: string | null) => {
+                      if (typeof error === 'string' && !error.includes("You don't have any supplied assets")) {
+                        setInputError(error);
+                      } else {
+                        setInputError(null);
+                      }
+                    }}
+                    exceedMaxErrMessage={
+                      supplyAmount && supplyAmount > (useEth ? (ethBalance ?? BigInt(0)) : (tokenBalance ?? BigInt(0)))
+                        ? 'Insufficient Balance'
+                        : undefined
+                    }
+                  />
+                  {inputError && !inputError.includes("You don't have any supplied assets") && (
+                    <p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">{inputError}</p>
+                  )}
                 </div>
+
+                <ExecuteTransactionButton
+                  targetChainId={market.morphoBlue.chain.id}
+                  onClick={handleSupply}
+                  isLoading={isLoadingPermit2 || supplyPending}
+                  disabled={inputError !== null || !supplyAmount}
+                  variant="primary"
+                  className="ml-2 min-w-32"
+                >
+                  Supply
+                </ExecuteTransactionButton>
               </div>
-            </>
-          ) : (
-            <div className="flex justify-center py-4">
-              <AccountConnect />
             </div>
-          )}
+          </div>
         </div>
       )}
     </>
diff --git a/src/components/WithdrawModalContent.tsx b/src/components/WithdrawModalContent.tsx
index f0d38957..34f33447 100644
--- a/src/components/WithdrawModalContent.tsx
+++ b/src/components/WithdrawModalContent.tsx
@@ -4,15 +4,13 @@ import { type Address, encodeFunctionData } from 'viem';
 import { useConnection } from 'wagmi';
 import morphoAbi from '@/abis/morpho';
 import Input from '@/components/Input/Input';
-import AccountConnect from '@/components/layout/header/AccountConnect';
-import { useMarketNetwork } from '@/hooks/useMarketNetwork';
 import { useStyledToast } from '@/hooks/useStyledToast';
 import { useTransactionWithToast } from '@/hooks/useTransactionWithToast';
 import { formatBalance, formatReadable, min } from '@/utils/balance';
 import { getMorphoAddress } from '@/utils/morpho';
 import type { SupportedNetworks } from '@/utils/networks';
 import type { Market, MarketPosition } from '@/utils/types';
-import { Button } from '@/components/ui/button';
+import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 
 type WithdrawModalContentProps = {
   position?: MarketPosition | null;
@@ -35,15 +33,11 @@ export function WithdrawModalContent({ position, market, onClose, refetch, onAmo
     },
     [onAmountChange],
   );
-  const { address: account, isConnected, chainId } = useConnection();
+  const { address: account, chainId } = useConnection();
 
   // Prefer the market prop (which has fresh state) over position.market
   const activeMarket = market ?? position?.market;
 
-  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
-    targetChainId: activeMarket?.morphoBlue.chain.id ?? 0,
-  });
-
   const { isConfirming, sendTransaction } = useTransactionWithToast({
     toastId: 'withdraw',
     pendingText: activeMarket
@@ -109,6 +103,10 @@ export function WithdrawModalContent({ position, market, onClose, refetch, onAmo
     });
   }, [account, activeMarket, position, withdrawAmount, sendTransaction, toast]);
 
+  const handleWithdraw = useCallback(() => {
+    void withdraw();
+  }, [withdraw]);
+
   if (!activeMarket) {
     return (
       <div className="flex flex-col items-center justify-center py-8">
@@ -119,59 +117,44 @@ export function WithdrawModalContent({ position, market, onClose, refetch, onAmo
 
   return (
     <div className="flex flex-col">
-      {isConnected ? (
-        <>
-          {/* Withdraw Input Section */}
-          <div className="mt-12 space-y-4">
-            <div>
-              <div className="flex items-center justify-between">
-                <span className="opacity-80">Withdraw amount</span>
-                <div className="flex flex-col items-end gap-1">
-                  <p className="font-inter text-xs opacity-50">
-                    Available: {formatReadable(formatBalance(position?.state.supplyAssets ?? BigInt(0), activeMarket.loanAsset.decimals))}{' '}
-                    {activeMarket.loanAsset.symbol}
-                  </p>
-                </div>
-              </div>
+      {/* Withdraw Input Section */}
+      <div className="mt-12 space-y-4">
+        <div>
+          <div className="flex items-center justify-between">
+            <span className="opacity-80">Withdraw amount</span>
+            <div className="flex flex-col items-end gap-1">
+              <p className="font-inter text-xs opacity-50">
+                Available: {formatReadable(formatBalance(position?.state.supplyAssets ?? BigInt(0), activeMarket.loanAsset.decimals))}{' '}
+                {activeMarket.loanAsset.symbol}
+              </p>
+            </div>
+          </div>
 
-              <div className="mt-2 flex items-start justify-between">
-                <div className="relative flex-grow">
-                  <Input
-                    decimals={activeMarket.loanAsset.decimals}
-                    max={position ? min(BigInt(position.state.supplyAssets), BigInt(activeMarket.state.liquidityAssets)) : BigInt(0)}
-                    setValue={handleWithdrawAmountChange}
-                    setError={setInputError}
-                    exceedMaxErrMessage="Insufficient Liquidity"
-                    error={inputError}
-                  />
-                </div>
-                {needSwitchChain ? (
-                  <Button
-                    onClick={switchToNetwork}
-                    className="ml-2 min-w-32"
-                    variant="default"
-                  >
-                    Switch Chain
-                  </Button>
-                ) : (
-                  <Button
-                    disabled={!isConnected || isConfirming || !withdrawAmount}
-                    onClick={() => void withdraw()}
-                    className="ml-2 min-w-32"
-                    variant="primary"
-                  >
-                    Withdraw
-                  </Button>
-                )}
-              </div>
+          <div className="mt-2 flex items-start justify-between">
+            <div className="relative flex-grow">
+              <Input
+                decimals={activeMarket.loanAsset.decimals}
+                max={position ? min(BigInt(position.state.supplyAssets), BigInt(activeMarket.state.liquidityAssets)) : BigInt(0)}
+                setValue={handleWithdrawAmountChange}
+                setError={setInputError}
+                exceedMaxErrMessage="Insufficient Liquidity"
+                error={inputError}
+              />
             </div>
+
+            <ExecuteTransactionButton
+              targetChainId={activeMarket.morphoBlue.chain.id}
+              onClick={handleWithdraw}
+              isLoading={isConfirming}
+              disabled={!withdrawAmount}
+              variant="primary"
+              className="ml-2 min-w-32"
+            >
+              Withdraw
+            </ExecuteTransactionButton>
           </div>
-        </>
-      ) : (
-        <div className="flex justify-center py-4">
-          <AccountConnect />
         </div>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/src/components/ui/ExecuteTransactionButton.tsx b/src/components/ui/ExecuteTransactionButton.tsx
new file mode 100644
index 00000000..99fc1d84
--- /dev/null
+++ b/src/components/ui/ExecuteTransactionButton.tsx
@@ -0,0 +1,150 @@
+import { useCallback, useState } from 'react';
+import { useAppKit } from '@reown/appkit/react';
+import { useConnection } from 'wagmi';
+import { Button, type ButtonProps } from '@/components/ui/button';
+import { Spinner } from '@/components/common/Spinner';
+import { useMarketNetwork } from '@/hooks/useMarketNetwork';
+import { getNetworkName } from '@/utils/networks';
+
+/**
+ * UI delay after chain switch to allow wagmi state to update
+ * Prevents button flicker during network transition
+ */
+const CHAIN_SWITCH_UI_DELAY_MS = 500;
+
+type ExecuteTransactionButtonProps = Omit<ButtonProps, 'onClick' | 'children'> & {
+  targetChainId: number;
+
+  /**
+   * The transaction execution function to call when ready
+   */
+  onClick: () => void;
+
+  isLoading?: boolean;
+
+  /**
+   * The text to display when the button is ready to execute the transaction
+   */
+  children: React.ReactNode;
+
+  /**
+   * Optional custom text for the connect wallet state
+   * @default "Connect Wallet"
+   */
+  connectText?: string;
+
+  /**
+   * Optional custom text for the switch chain state
+   */
+  switchChainText?: string;
+};
+
+/**
+ * A smart transaction button that handles the complete flow:
+ * 1. Connect wallet if not connected
+ * 2. Switch to correct chain if needed
+ * 3. Execute the transaction
+ *
+ * This eliminates the need for repetitive wallet connection and chain switching
+ * checks across transaction components.
+ *
+ * @example
+ * ```tsx
+ * <ExecuteTransactionButton
+ *   targetChainId={market.morphoBlue.chain.id}
+ *   onClick={() => void approveAndSupply()}
+ *   isLoading={supplyPending}
+ *   disabled={!supplyAmount || inputError !== null}
+ *   variant="primary"
+ * >
+ *   Supply
+ * </ExecuteTransactionButton>
+ * ```
+ */
+export function ExecuteTransactionButton({
+  targetChainId,
+  onClick,
+  isLoading = false,
+  children,
+  connectText = 'Connect Wallet',
+  switchChainText,
+  disabled,
+  variant = 'primary',
+  ...buttonProps
+}: ExecuteTransactionButtonProps): JSX.Element {
+  const { open } = useAppKit();
+  const { isConnected } = useConnection();
+  const [isSwitching, setIsSwitching] = useState(false);
+
+  // Use the market network hook for chain validation and switching
+  const { needSwitchChain, switchToNetwork } = useMarketNetwork({
+    targetChainId,
+  });
+
+  // Handle wallet connection
+  const handleConnect = useCallback(() => {
+    open();
+  }, [open]);
+
+  // Handle chain switching with loading state
+  const handleSwitchChain = useCallback(async () => {
+    setIsSwitching(true);
+    try {
+      switchToNetwork();
+      // Wait for wagmi state to update after chain switch
+      await new Promise((resolve) => setTimeout(resolve, CHAIN_SWITCH_UI_DELAY_MS));
+    } finally {
+      setIsSwitching(false);
+    }
+  }, [switchToNetwork]);
+
+  // Determine button state and content
+  if (!isConnected) {
+    return (
+      <Button
+        // no disabled cuz always allow connect
+        onClick={handleConnect}
+        variant={variant}
+        {...buttonProps}
+      >
+        {connectText}
+      </Button>
+    );
+  }
+
+  if (needSwitchChain) {
+    const defaultSwitchText = `Switch to ${getNetworkName(targetChainId)}`;
+    return (
+      <Button
+        onClick={() => void handleSwitchChain()}
+        variant={variant}
+        // always allow clicking switch chain unless it's switching
+        disabled={isSwitching}
+        isLoading={isSwitching}
+        {...buttonProps}
+      >
+        {isSwitching ? (
+          <div className="flex items-center gap-2">
+            <Spinner size={16} />
+            Switching...
+          </div>
+        ) : (
+          (switchChainText ?? defaultSwitchText)
+        )}
+      </Button>
+    );
+  }
+
+  // Ready to execute transaction
+  return (
+    <Button
+      onClick={onClick}
+      variant={variant}
+      disabled={disabled || isLoading}
+      isLoading={isLoading}
+      {...buttonProps}
+    >
+      {children}
+    </Button>
+  );
+}