From ca1e25170ceced97ea86eb87a9c1aaee89063751 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Mon, 8 Dec 2025 10:20:19 +0100
Subject: [PATCH 01/10] Revert "revert: "Merge pull request #1730 from
 curvefi/refactor/routes""

---
 .../src/lend/components/AlertNoLoanFound.tsx  |   2 +-
 .../PageLoanCreate/LoanCreateTabs.tsx         |  66 +++++++
 .../PageLoanCreate/LoanFormCreate/index.tsx   |   4 +-
 .../lend/components/PageLoanCreate/Page.tsx   |   9 +-
 .../lend/components/PageLoanCreate/index.tsx  | 103 -----------
 .../lend/components/PageLoanCreate/types.ts   |   1 -
 .../PageLoanManage/LoanBorrowMore/index.tsx   |  25 ++-
 .../LoanCollateralAdd/index.tsx               |   5 +
 .../LoanCollateralRemove/index.tsx            |   5 +
 .../PageLoanManage/LoanRepay/index.tsx        |   9 +
 .../LoanSelfLiquidation/index.tsx             |   2 +-
 .../PageLoanManage/ManageLoanTabs.tsx         | 103 +++++++++++
 .../lend/components/PageLoanManage/Page.tsx   |  30 +--
 .../lend/components/PageLoanManage/index.tsx  | 157 ----------------
 .../lend/components/PageLoanManage/types.ts   |   4 -
 .../src/lend/components/PageVault/Page.tsx    |  12 +-
 .../PageVault/VaultDepositMint/index.tsx      |   5 +-
 .../components/PageVault/VaultStake/index.tsx |   3 +-
 .../lend/components/PageVault/VaultTabs.tsx   |  32 ++++
 .../PageVault/VaultUnstake/index.tsx          |   3 +-
 .../PageVault/VaultWithdrawRedeem/index.tsx   |  11 +-
 .../src/lend/components/PageVault/index.tsx   |  72 --------
 apps/main/src/lend/constants.ts               |  14 +-
 .../lend/hooks/useBorrowPositionDetails.ts    |  15 +-
 apps/main/src/lend/types/lend.types.ts        |  13 +-
 apps/main/src/lend/utils/helpers.ts           |   8 -
 apps/main/src/lend/utils/utilsRouter.ts       |  20 +-
 .../components/AddCollateralForm.tsx          |   2 +-
 .../components/RemoveCollateralForm.tsx       |   2 +-
 .../manage-loan/components/RepayForm.tsx      |  68 ++++---
 .../manage-loan/hooks/useAddCollateralForm.ts |   2 +-
 .../hooks/useRemoveCollateralForm.ts          |   2 +-
 .../manage-loan/hooks/useRepayForm.ts         |   2 +-
 .../src/llamalend/mutations/repay.mutation.ts |   2 +-
 .../llamalend/mutations/useLlammaMutation.ts  |   4 +-
 .../loan/components/PageLoanCreate/index.tsx  |   2 +-
 .../loan/components/PageLoanManage/index.tsx  |   3 +
 apps/main/src/routes/lend.routes.tsx          |  21 +--
 .../src/shared/ui/FormTabs/FormTabs.tsx       | 117 ++++++++++++
 .../shared/ui/stories/FormTabs.stories.tsx    | 171 ++++++++++++++++++
 40 files changed, 641 insertions(+), 490 deletions(-)
 create mode 100644 apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
 delete mode 100644 apps/main/src/lend/components/PageLoanCreate/index.tsx
 create mode 100644 apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
 delete mode 100644 apps/main/src/lend/components/PageLoanManage/index.tsx
 create mode 100644 apps/main/src/lend/components/PageVault/VaultTabs.tsx
 delete mode 100644 apps/main/src/lend/components/PageVault/index.tsx
 create mode 100644 packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
 create mode 100644 packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx

diff --git a/apps/main/src/lend/components/AlertNoLoanFound.tsx b/apps/main/src/lend/components/AlertNoLoanFound.tsx
index 246931bbfa..d37cb33e5d 100644
--- a/apps/main/src/lend/components/AlertNoLoanFound.tsx
+++ b/apps/main/src/lend/components/AlertNoLoanFound.tsx
@@ -25,7 +25,7 @@ const AlertNoLoanFound = ({ alertType, owmId }: { alertType?: AlertType; owmId:
           size="large"
           onClick={() => {
             setStateByKeyMarkets('marketDetailsView', 'market')
-            push(getLoanCreatePathname(params, owmId, 'create'))
+            push(getLoanCreatePathname(params, owmId))
           }}
         >
           Create loan
diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
new file mode 100644
index 0000000000..c9bd29fe8a
--- /dev/null
+++ b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
@@ -0,0 +1,66 @@
+import { useCallback } from 'react'
+import LoanFormCreate from '@/lend/components/PageLoanCreate/LoanFormCreate'
+import type { FormValues } from '@/lend/components/PageLoanCreate/types'
+import { DEFAULT_FORM_VALUES } from '@/lend/components/PageLoanCreate/utils'
+import networks from '@/lend/networks'
+import useStore from '@/lend/store/useStore'
+import { type MarketUrlParams, type PageContentProps } from '@/lend/types/lend.types'
+import { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm'
+import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types'
+import { hasLeverage } from '@/llamalend/llama.utils'
+import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
+import { t } from '@ui-kit/lib/i18n'
+import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+
+type CreateLoanProps = PageContentProps<MarketUrlParams>
+
+/**
+ * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`.
+ */
+const useOnFormUpdate = ({ api, market }: Pick<CreateLoanProps, 'api' | 'market'>): OnBorrowFormUpdate =>
+  useCallback(
+    async ({ debt, userCollateral, range, slippage, leverageEnabled }) => {
+      const { setFormValues, setStateByKeys } = useStore.getState().loanCreate
+      const formValues: FormValues = {
+        ...DEFAULT_FORM_VALUES,
+        n: range,
+        debt: `${debt ?? ''}`,
+        userCollateral: `${userCollateral ?? ''}`,
+      }
+      await setFormValues(api, market, formValues, `${slippage}`, leverageEnabled)
+      setStateByKeys({ isEditLiqRange: true })
+    },
+    [api, market],
+  )
+
+function CreateLoanTab({ market, api, rChainId }: CreateLoanProps) {
+  const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
+  const onCreated = useCallback(
+    async () => api && market && (await onLoanCreated(api, market)),
+    [api, market, onLoanCreated],
+  )
+  const onUpdate = useOnFormUpdate({ market, api })
+  return (
+    <CreateLoanForm networks={networks} chainId={rChainId} market={market} onUpdate={onUpdate} onCreated={onCreated} />
+  )
+}
+
+const LendCreateTabsNewMenu = [
+  { value: 'create', label: t`Borrow`, component: CreateLoanTab },
+] satisfies FormTab<CreateLoanProps>[]
+
+const LendCreateTabsOldMenu = [
+  { value: 'create', label: t`Create Loan`, component: LoanFormCreate },
+  {
+    value: 'leverage',
+    label: t`Leverage`,
+    component: (p) => <LoanFormCreate {...p} isLeverage />,
+    visible: ({ market }) => market && hasLeverage(market),
+  },
+] satisfies FormTab<CreateLoanProps>[]
+
+export const LoanCreateTabs = (pageProps: CreateLoanProps) => {
+  const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu
+  const shouldWrap = menu === LendCreateTabsOldMenu
+  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} />
+}
diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx
index 05549d74ad..f9f4426a09 100644
--- a/apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx
+++ b/apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx
@@ -412,7 +412,7 @@ const LoanCreate = ({
             size="large"
             onClick={() => {
               setStateByKeyMarkets('marketDetailsView', 'user')
-              push(getLoanManagePathname(params, rOwmId, 'loan'))
+              push(getLoanManagePathname(params, rOwmId))
             }}
           >
             Manage loan
@@ -431,7 +431,7 @@ const LoanCreate = ({
           )}
           {steps && <Stepper steps={steps} />}
           {formStatus.isComplete && market && (
-            <LinkButton variant="filled" size="large" href={getLoanManagePathname(params, market.id, 'loan')}>
+            <LinkButton variant="filled" size="large" href={getLoanManagePathname(params, market.id)}>
               Manage loan
             </LinkButton>
           )}
diff --git a/apps/main/src/lend/components/PageLoanCreate/Page.tsx b/apps/main/src/lend/components/PageLoanCreate/Page.tsx
index 3841891282..64d881c17b 100644
--- a/apps/main/src/lend/components/PageLoanCreate/Page.tsx
+++ b/apps/main/src/lend/components/PageLoanCreate/Page.tsx
@@ -3,7 +3,7 @@ import type { Address } from 'viem'
 import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
-import LoanCreate from '@/lend/components/PageLoanCreate/index'
+import { LoanCreateTabs } from '@/lend/components/PageLoanCreate/LoanCreateTabs'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
 import { useMarketDetails } from '@/lend/hooks/useMarketDetails'
@@ -35,7 +35,7 @@ const { Spacing } = SizesAndSpaces
 
 const Page = () => {
   const params = useParams<MarketUrlParams>()
-  const { rMarket, rChainId, rFormType } = parseMarketParams(params)
+  const { rMarket, rChainId } = parseMarketParams(params)
 
   const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
   const { llamaApi: api = null, connectState } = useConnection()
@@ -88,7 +88,6 @@ const Page = () => {
     params,
     rChainId,
     rOwmId,
-    rFormType,
     api,
     market,
     titleMapper,
@@ -97,7 +96,7 @@ const Page = () => {
   }
   const positionDetailsHrefs = {
     borrow: '',
-    supply: getVaultPathname(params, rOwmId, 'deposit'),
+    supply: getVaultPathname(params, rOwmId),
   }
 
   return isSuccess && !market ? (
@@ -106,7 +105,7 @@ const Page = () => {
     <>
       <DetailPageStack>
         <AppPageFormsWrapper data-testid="form-wrapper">
-          {rChainId && rOwmId && <LoanCreate {...pageProps} params={params} />}
+          {rChainId && rOwmId && <LoanCreateTabs {...pageProps} params={params} />}
         </AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner
diff --git a/apps/main/src/lend/components/PageLoanCreate/index.tsx b/apps/main/src/lend/components/PageLoanCreate/index.tsx
deleted file mode 100644
index 520c539ba4..0000000000
--- a/apps/main/src/lend/components/PageLoanCreate/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useCallback, useMemo } from 'react'
-import LoanFormCreate from '@/lend/components/PageLoanCreate/LoanFormCreate'
-import type { FormValues } from '@/lend/components/PageLoanCreate/types'
-import { DEFAULT_FORM_VALUES } from '@/lend/components/PageLoanCreate/utils'
-import networks from '@/lend/networks'
-import useStore from '@/lend/store/useStore'
-import { type MarketUrlParams, type PageContentProps } from '@/lend/types/lend.types'
-import { getLoanCreatePathname } from '@/lend/utils/utilsRouter'
-import { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm'
-import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types'
-import Stack from '@mui/material/Stack'
-import { AppFormContentWrapper } from '@ui/AppForm'
-import { useNavigate } from '@ui-kit/hooks/router'
-import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
-import { t } from '@ui-kit/lib/i18n'
-import { TabsSwitcher, type TabOption } from '@ui-kit/shared/ui/TabsSwitcher'
-import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-
-const { MaxWidth } = SizesAndSpaces
-
-/**
- * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`.
- */
-const useOnFormUpdate = ({ api, market }: PageContentProps): OnBorrowFormUpdate =>
-  useCallback(
-    async ({ debt, userCollateral, range, slippage, leverageEnabled }) => {
-      const { setFormValues, setStateByKeys } = useStore.getState().loanCreate
-      const formValues: FormValues = {
-        ...DEFAULT_FORM_VALUES,
-        n: range,
-        debt: `${debt ?? ''}`,
-        userCollateral: `${userCollateral ?? ''}`,
-      }
-      await setFormValues(api, market, formValues, `${slippage}`, leverageEnabled)
-      setStateByKeys({ isEditLiqRange: true })
-    },
-    [api, market],
-  )
-
-const LoanCreate = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
-  const { rChainId, rOwmId, rFormType, market, params, api } = pageProps
-  const push = useNavigate()
-  const shouldUseBorrowUnifiedForm = useCreateLoanMuiForm()
-  const onUpdate = useOnFormUpdate(pageProps)
-
-  const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
-  const resetState = useStore((state) => state.loanCreate.resetState)
-
-  type Tab = 'create' | 'leverage'
-  const tabs: TabOption<Tab>[] = useMemo(
-    () =>
-      shouldUseBorrowUnifiedForm
-        ? // the new borrow form contains both create and leverage functionality
-          [{ value: 'create' as const, label: t`Borrow` }]
-        : [
-            { value: 'create' as const, label: t`Create Loan` },
-            ...(market?.leverage.hasLeverage() ? [{ value: 'leverage' as const, label: t`Leverage` }] : []),
-          ],
-    [market?.leverage, shouldUseBorrowUnifiedForm],
-  )
-
-  const onCreated = useCallback(
-    async () => api && market && (await onLoanCreated(api, market)),
-    [api, market, onLoanCreated],
-  )
-
-  return (
-    <Stack
-      sx={{
-        width: { mobile: '100%', tablet: MaxWidth.actionCard },
-        marginInline: { mobile: 'auto', desktop: 0 },
-      }}
-    >
-      <TabsSwitcher
-        variant="contained"
-        size="medium"
-        value={!rFormType ? 'create' : rFormType}
-        onChange={(key) => {
-          resetState({ rChainId, rOwmId, key })
-          push(getLoanCreatePathname(params, rOwmId, key))
-        }}
-        options={tabs}
-      />
-      {shouldUseBorrowUnifiedForm ? (
-        <CreateLoanForm
-          networks={networks}
-          chainId={rChainId}
-          market={market ?? undefined}
-          onUpdate={onUpdate}
-          onCreated={onCreated}
-        />
-      ) : (
-        <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-          <AppFormContentWrapper>
-            <LoanFormCreate isLeverage={rFormType === 'leverage'} {...pageProps} />
-          </AppFormContentWrapper>
-        </Stack>
-      )}
-    </Stack>
-  )
-}
-
-export default LoanCreate
diff --git a/apps/main/src/lend/components/PageLoanCreate/types.ts b/apps/main/src/lend/components/PageLoanCreate/types.ts
index b49d280ce8..4293951e40 100644
--- a/apps/main/src/lend/components/PageLoanCreate/types.ts
+++ b/apps/main/src/lend/components/PageLoanCreate/types.ts
@@ -10,7 +10,6 @@ import {
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import type { Step } from '@ui/Stepper/types'
 
-export type FormType = 'create' | 'vault' | 'leverage'
 export type StepKey = 'APPROVAL' | 'CREATE' | ''
 export type InpError = 'too-much' | 'too-much-max' | ''
 
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
index 91ea35d726..0c655bf6f7 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
@@ -21,11 +21,13 @@ import useStore from '@/lend/store/useStore'
 import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { hasLeverage } from '@/llamalend/llama.utils'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import AlertBox from '@ui/AlertBox'
+import { AppFormContentWrapper } from '@ui/AppForm'
 import { getActiveStep } from '@ui/Stepper/helpers'
 import Stepper from '@ui/Stepper/Stepper'
 import type { Step } from '@ui/Stepper/types'
@@ -40,17 +42,9 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
 
-const LoanBorrowMore = ({
-  rChainId,
-  rOwmId,
-  isLeverage = false,
-  isLoaded,
-  api,
-  market,
-  userActiveKey,
-}: PageContentProps & { isLeverage?: boolean }) => {
+const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
   const isSubscribed = useRef(false)
-
+  const isLeverage = !!market && hasLeverage(market)
   const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
   const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
   const detailInfoLeverage = useStore((state) => state.loanBorrowMore.detailInfoLeverage[activeKey])
@@ -436,3 +430,14 @@ const LoanBorrowMore = ({
 }
 
 export default LoanBorrowMore
+
+/**
+ * The new implementation of LoanBorrowMore with mui isn't ready yet. For now, we wrap the old one for styling.
+ */
+export const LoanBorrowMoreWrapped = (props: PageContentProps) => (
+  <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+    <AppFormContentWrapper>
+      <LoanBorrowMore {...props} />
+    </AppFormContentWrapper>
+  </Stack>
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx
index 7fb4485c0b..eea70678a7 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx
@@ -19,6 +19,7 @@ import useStore from '@/lend/store/useStore'
 import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { AddCollateralForm } from '@/llamalend/features/manage-loan/components/AddCollateralForm'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import AlertBox from '@ui/AlertBox'
 import { getActiveStep } from '@ui/Stepper/helpers'
@@ -258,3 +259,7 @@ const LoanCollateralAdd = ({ rChainId, rOwmId, api, isLoaded, market, userActive
 }
 
 export default LoanCollateralAdd
+
+export const LoanAddCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <AddCollateralForm networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx
index aa959653e8..0a2e54f410 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx
@@ -21,6 +21,7 @@ import useStore from '@/lend/store/useStore'
 import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { RemoveCollateralForm } from '@/llamalend/features/manage-loan/components/RemoveCollateralForm'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import AlertBox from '@ui/AlertBox'
@@ -296,3 +297,7 @@ const LoanCollateralRemove = ({ rChainId, rOwmId, isLoaded, api, market, userAct
 }
 
 export default LoanCollateralRemove
+
+export const LoanRemoveCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <RemoveCollateralForm networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx
index aa58edd63f..8c4c51015e 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx
@@ -20,6 +20,7 @@ import { Api, FormError, type MarketUrlParams, OneWayMarketTemplate, PageContent
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { getCollateralListPathname } from '@/lend/utils/utilsRouter'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
+import { RepayForm } from '@/llamalend/features/manage-loan/components/RepayForm'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import Stack from '@mui/material/Stack'
@@ -537,3 +538,11 @@ const LoanRepay = ({
 }
 
 export default LoanRepay
+
+export const LoanRepayFromWalletTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <RepayForm fromWallet networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)
+
+export const LoanRepayFromCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
+  <RepayForm fromCollateral networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
+)
diff --git a/apps/main/src/lend/components/PageLoanManage/LoanSelfLiquidation/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanSelfLiquidation/index.tsx
index b1647b2693..15efbecd39 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanSelfLiquidation/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanSelfLiquidation/index.tsx
@@ -45,7 +45,7 @@ const LoanSelfLiquidation = ({
   market,
   userActiveKey,
   params,
-}: PageContentProps & { params: MarketUrlParams }) => {
+}: PageContentProps<MarketUrlParams>) => {
   const isSubscribed = useRef(false)
   const formEstGas = useStore((state) => state.loanSelfLiquidation.formEstGas)
   const formStatus = useStore((state) => state.loanSelfLiquidation.formStatus)
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
new file mode 100644
index 0000000000..ee4e2ad5a4
--- /dev/null
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -0,0 +1,103 @@
+import LoanBorrowMore, { LoanBorrowMoreWrapped } from '@/lend/components/PageLoanManage/LoanBorrowMore'
+import LoanCollateralAdd, { LoanAddCollateralTab } from '@/lend/components/PageLoanManage/LoanCollateralAdd'
+import LoanCollateralRemove, { LoanRemoveCollateralTab } from '@/lend/components/PageLoanManage/LoanCollateralRemove'
+import LoanRepay, {
+  LoanRepayFromCollateralTab,
+  LoanRepayFromWalletTab,
+} from '@/lend/components/PageLoanManage/LoanRepay'
+import LoanSelfLiquidation from '@/lend/components/PageLoanManage/LoanSelfLiquidation'
+import networks from '@/lend/networks'
+import { type MarketUrlParams, PageContentProps } from '@/lend/types/lend.types'
+import { useClosePositionTab } from '@/llamalend/features/manage-soft-liquidation/hooks/useClosePositionTab'
+import { useImproveHealthTab } from '@/llamalend/features/manage-soft-liquidation/hooks/useImproveHealthTab'
+import { ClosePosition } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ClosePosition'
+import { ImproveHealth } from '@/llamalend/features/manage-soft-liquidation/ui/tabs/ImproveHealth'
+import { useManageLoanMuiForm, useManageSoftLiquidation } from '@ui-kit/hooks/useFeatureFlags'
+import { t } from '@ui-kit/lib/i18n'
+import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+
+type ManageLoanProps = PageContentProps<MarketUrlParams>
+
+const ImproveHealthTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
+  <ImproveHealth {...useImproveHealthTab({ chainId: rChainId, network: networks[rChainId], marketId: rOwmId })} />
+)
+
+const ClosePositionTab = ({ rChainId, rOwmId }: ManageLoanProps) => (
+  <ClosePosition {...useClosePositionTab({ chainId: rChainId, network: networks[rChainId], marketId: rOwmId })} />
+)
+
+const LendManageLegacyMenu = [
+  {
+    value: 'loan',
+    label: t`Borrow`,
+    subTabs: [
+      { value: 'loan-increase', label: t`Borrow more`, component: LoanBorrowMore },
+      { value: 'loan-decrease', label: t`Repay`, component: LoanRepay },
+      { value: 'loan-liquidate', label: t`Self-liquidate`, component: LoanSelfLiquidation },
+    ],
+  },
+  {
+    value: 'collateral',
+    label: t`Borrow`,
+    subTabs: [
+      { value: 'collateral-increase', label: t`Add collateral`, component: LoanCollateralAdd },
+      { value: 'collateral-decrease', label: t`Remove collateral`, component: LoanCollateralRemove },
+    ],
+  },
+  {
+    value: 'leverage',
+    label: t`Leverage`,
+    visible: ({ market }) => market?.leverage?.hasLeverage(),
+    component: LoanBorrowMore,
+  },
+] satisfies FormTab<ManageLoanProps>[]
+
+const LendManageNewMenu = [
+  {
+    value: 'borrow',
+    label: ({ market }) => (market?.leverage?.hasLeverage() ? t`Leverage` : t`Borrow`),
+    component: LoanBorrowMoreWrapped,
+  },
+  {
+    value: 'repay',
+    label: t`Repay`,
+    subTabs: [
+      { value: 'from-wallet', label: t`From wallet`, component: LoanRepayFromWalletTab },
+      { value: 'from-collateral', label: t`From collateral`, component: LoanRepayFromCollateralTab },
+    ],
+  },
+  {
+    value: 'collateral',
+    label: t`Collateral`,
+    subTabs: [
+      { value: 'add', label: t`Add`, component: LoanAddCollateralTab },
+      { value: 'remove', label: t`Remove`, component: LoanRemoveCollateralTab },
+    ],
+  },
+] satisfies FormTab<ManageLoanProps>[]
+
+const LendManageSoftLiquidationMenu = [
+  {
+    value: 'soft-liquidation',
+    label: t`Manage soft liquidation`,
+    subTabs: [
+      { value: 'improve-health', label: t`Improve health`, component: ImproveHealthTab },
+      { value: 'close-position', label: t`Close position`, component: ClosePositionTab },
+    ],
+  },
+] satisfies FormTab<ManageLoanProps>[]
+
+export const ManageLoanTabs = ({
+  isInSoftLiquidation,
+  ...pageProps
+}: ManageLoanProps & { isInSoftLiquidation: boolean | undefined }) => {
+  const shouldUseSoftLiquidation = useManageSoftLiquidation() && isInSoftLiquidation
+  const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
+  const menu = shouldUseSoftLiquidation
+    ? LendManageSoftLiquidationMenu
+    : shouldUseManageLoanMuiForm
+      ? LendManageNewMenu
+      : LendManageLegacyMenu
+  const shouldWrap = menu === LendManageLegacyMenu
+  return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} />
+}
diff --git a/apps/main/src/lend/components/PageLoanManage/Page.tsx b/apps/main/src/lend/components/PageLoanManage/Page.tsx
index 4613d40239..0ca3e148c9 100644
--- a/apps/main/src/lend/components/PageLoanManage/Page.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/Page.tsx
@@ -3,8 +3,7 @@ import type { Address } from 'viem'
 import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
-import LoanMange from '@/lend/components/PageLoanManage/index'
-import type { DetailInfoTypes } from '@/lend/components/PageLoanManage/types'
+import { ManageLoanTabs } from '@/lend/components/PageLoanManage/ManageLoanTabs'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useBorrowPositionDetails } from '@/lend/hooks/useBorrowPositionDetails'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
@@ -16,7 +15,6 @@ import useStore from '@/lend/store/useStore'
 import { type MarketUrlParams } from '@/lend/types/lend.types'
 import { getVaultPathname, parseMarketParams } from '@/lend/utils/helpers'
 import { getCollateralListPathname } from '@/lend/utils/utilsRouter'
-import { ManageSoftLiquidation } from '@/llamalend/features/manage-soft-liquidation'
 import { MarketDetails } from '@/llamalend/features/market-details'
 import { BorrowPositionDetails, NoPosition } from '@/llamalend/features/market-position-details'
 import { UserPositionHistory } from '@/llamalend/features/user-position-history'
@@ -30,7 +28,6 @@ import Box from '@ui/Box'
 import { ConnectWalletPrompt, isLoading, useConnection, useWallet } from '@ui-kit/features/connect-wallet'
 import { useLayoutStore } from '@ui-kit/features/layout'
 import { useParams } from '@ui-kit/hooks/router'
-import { useManageSoftLiquidation } from '@ui-kit/hooks/useFeatureFlags'
 import { t } from '@ui-kit/lib/i18n'
 import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
 import { ErrorPage } from '@ui-kit/pages/ErrorPage'
@@ -40,13 +37,12 @@ const { Spacing } = SizesAndSpaces
 
 const Page = () => {
   const params = useParams<MarketUrlParams>()
-  const { rMarket, rChainId, rFormType } = parseMarketParams(params)
+  const { rMarket, rChainId } = parseMarketParams(params)
   const { llamaApi: api = null, connectState } = useConnection()
   const titleMapper = useTitleMapper()
   const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
   const rOwmId = market?.id ?? ''
   const userActiveKey = helpers.getUserActiveKey(api, market!)
-  const isMdUp = useLayoutStore((state) => state.isMdUp)
   const isPageVisible = useLayoutStore((state) => state.isPageVisible)
   const fetchAllMarketDetails = useStore((state) => state.markets.fetchAll)
   const fetchAllUserMarketDetails = useStore((state) => state.user.fetchAll)
@@ -88,15 +84,8 @@ const Page = () => {
     network,
   })
 
-  const isManageSoftLiq =
-    useManageSoftLiquidation() &&
-    (borrowPositionDetails.liquidationAlert.softLiquidation || borrowPositionDetails.liquidationAlert.hardLiquidation)
-
-  // set tabs
-  const DETAIL_INFO_TYPES: { key: DetailInfoTypes; label: string }[] = [{ label: t`Market Details`, key: 'market' }]
-  if (signerAddress) {
-    DETAIL_INFO_TYPES.push({ label: t`Your Details`, key: 'user' })
-  }
+  const isInSoftLiquidation =
+    borrowPositionDetails.liquidationAlert.softLiquidation || borrowPositionDetails.liquidationAlert.hardLiquidation
 
   useEffect(() => {
     if (api && market && isPageVisible) {
@@ -123,7 +112,6 @@ const Page = () => {
     params,
     rChainId,
     rOwmId,
-    rFormType,
     isLoaded,
     api,
     market,
@@ -133,7 +121,7 @@ const Page = () => {
 
   const positionDetailsHrefs = {
     borrow: '',
-    supply: getVaultPathname(params, rOwmId, 'deposit'),
+    supply: getVaultPathname(params, rOwmId),
   }
 
   return isSuccess && !market ? (
@@ -142,13 +130,7 @@ const Page = () => {
     <>
       <DetailPageStack>
         <AppPageFormsWrapper>
-          {rChainId &&
-            rOwmId &&
-            (isManageSoftLiq ? (
-              <ManageSoftLiquidation marketId={rOwmId} chainId={rChainId} network={network} />
-            ) : (
-              <LoanMange {...pageProps} />
-            ))}
+          {rChainId && rOwmId && <ManageLoanTabs isInSoftLiquidation={isInSoftLiquidation} {...pageProps} />}
         </AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner
diff --git a/apps/main/src/lend/components/PageLoanManage/index.tsx b/apps/main/src/lend/components/PageLoanManage/index.tsx
deleted file mode 100644
index 6fbdbfb48c..0000000000
--- a/apps/main/src/lend/components/PageLoanManage/index.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import LoanBorrowMore from '@/lend/components/PageLoanManage/LoanBorrowMore'
-import LoanCollateralAdd from '@/lend/components/PageLoanManage/LoanCollateralAdd'
-import LoanCollateralRemove from '@/lend/components/PageLoanManage/LoanCollateralRemove'
-import LoanRepay from '@/lend/components/PageLoanManage/LoanRepay'
-import LoanSelfLiquidation from '@/lend/components/PageLoanManage/LoanSelfLiquidation'
-import type { CollateralFormType, LeverageFormType, LoanFormType } from '@/lend/components/PageLoanManage/types'
-import networks from '@/lend/networks'
-import { type MarketUrlParams, PageContentProps } from '@/lend/types/lend.types'
-import { getLoanManagePathname } from '@/lend/utils/utilsRouter'
-import { AddCollateralForm } from '@/llamalend/features/manage-loan/components/AddCollateralForm'
-import { RemoveCollateralForm } from '@/llamalend/features/manage-loan/components/RemoveCollateralForm'
-import { RepayForm } from '@/llamalend/features/manage-loan/components/RepayForm'
-import Stack from '@mui/material/Stack'
-import { AppFormContentWrapper } from '@ui/AppForm'
-import { useNavigate } from '@ui-kit/hooks/router'
-import { useManageLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
-import { t } from '@ui-kit/lib/i18n'
-import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
-import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-
-const { MaxWidth } = SizesAndSpaces
-
-const tabsLoan: TabOption<LoanFormType>[] = [
-  { value: 'loan-increase', label: t`Borrow more` },
-  { value: 'loan-decrease', label: t`Repay` },
-  { value: 'loan-liquidate', label: t`Self-liquidate` },
-]
-
-const tabsCollateral: TabOption<CollateralFormType>[] = [
-  { value: 'collateral-increase', label: t`Add collateral` },
-  { value: 'collateral-decrease', label: t`Remove collateral` },
-]
-
-const ManageLoan = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
-  const { rChainId, rOwmId, rFormType, market, params, isLoaded } = pageProps
-  const push = useNavigate()
-  const shouldUseManageLoanMuiForm = useManageLoanMuiForm()
-  const useMuiForm = shouldUseManageLoanMuiForm && !!market
-
-  type Tab = 'loan' | 'collateral' | 'leverage'
-  const tabs: TabOption<Tab>[] = useMemo(
-    () => [
-      { value: 'loan' as const, label: t`Loan` },
-      { value: 'collateral' as const, label: t`Collateral` },
-      ...(market?.leverage?.hasLeverage() ? [{ value: 'leverage' as const, label: t`Leverage` }] : []),
-    ],
-    [market?.leverage],
-  )
-
-  type SubTab = LoanFormType | CollateralFormType | LeverageFormType
-  const [subTab, setSubTab] = useState<SubTab | undefined>('loan-increase')
-
-  const subTabs = useMemo(
-    () => (!rFormType || rFormType === 'loan' ? tabsLoan : rFormType === 'collateral' ? tabsCollateral : []),
-    [rFormType],
-  )
-
-  useEffect(() => setSubTab(subTabs[0]?.value), [subTabs])
-
-  return (
-    <Stack
-      sx={{
-        width: { mobile: '100%', tablet: MaxWidth.actionCard },
-        marginInline: { mobile: 'auto', desktop: 0 },
-      }}
-    >
-      <TabsSwitcher
-        variant="contained"
-        size="medium"
-        value={!rFormType ? 'loan' : rFormType}
-        onChange={(key) => push(getLoanManagePathname(params, rOwmId, key))}
-        options={tabs}
-      />
-      {useMuiForm ? (
-        <>
-          <TabsSwitcher
-            variant="underlined"
-            size="small"
-            value={subTab}
-            onChange={setSubTab}
-            options={subTabs}
-            fullWidth
-          />
-
-          {subTab === 'loan-increase' && (
-            <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-              <AppFormContentWrapper>
-                <LoanBorrowMore {...pageProps} />
-              </AppFormContentWrapper>
-            </Stack>
-          )}
-          {subTab === 'loan-decrease' && market && (
-            <RepayForm
-              networks={networks}
-              chainId={rChainId}
-              market={market}
-              enabled={isLoaded}
-              // No extra side effects required for legacy store; llamalend hooks handle cache invalidation.
-              onRepaid={async () => {}}
-            />
-          )}
-          {subTab === 'loan-liquidate' && <LoanSelfLiquidation {...pageProps} />}
-          {subTab === 'collateral-increase' && market && (
-            <AddCollateralForm
-              networks={networks}
-              chainId={rChainId}
-              market={market}
-              enabled={isLoaded}
-              onAdded={async () => {}}
-            />
-          )}
-          {subTab === 'collateral-decrease' && market && (
-            <RemoveCollateralForm
-              networks={networks}
-              chainId={rChainId}
-              market={market}
-              enabled={isLoaded}
-              onRemoved={async () => {}}
-            />
-          )}
-          {/** Leverage has no subtabs */}
-          {rFormType === 'leverage' && (
-            <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-              <AppFormContentWrapper>
-                <LoanBorrowMore isLeverage {...pageProps} />
-              </AppFormContentWrapper>
-            </Stack>
-          )}
-        </>
-      ) : (
-        <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-          <TabsSwitcher
-            variant="underlined"
-            size="small"
-            value={subTab}
-            onChange={setSubTab}
-            options={subTabs}
-            fullWidth
-          />
-
-          <AppFormContentWrapper>
-            {subTab === 'loan-increase' && <LoanBorrowMore {...pageProps} />}
-            {subTab === 'loan-decrease' && <LoanRepay {...pageProps} />}
-            {subTab === 'loan-liquidate' && <LoanSelfLiquidation {...pageProps} />}
-            {subTab === 'collateral-increase' && <LoanCollateralAdd {...pageProps} />}
-            {subTab === 'collateral-decrease' && <LoanCollateralRemove {...pageProps} />}
-            {/** Leverage has no subtabs */}
-            {rFormType === 'leverage' && <LoanBorrowMore isLeverage {...pageProps} />}
-          </AppFormContentWrapper>
-        </Stack>
-      )}
-    </Stack>
-  )
-}
-
-export default ManageLoan
diff --git a/apps/main/src/lend/components/PageLoanManage/types.ts b/apps/main/src/lend/components/PageLoanManage/types.ts
index b57bb5ee69..a1a7aef085 100644
--- a/apps/main/src/lend/components/PageLoanManage/types.ts
+++ b/apps/main/src/lend/components/PageLoanManage/types.ts
@@ -1,10 +1,6 @@
 import { FutureRates } from '@/lend/types/lend.types'
 
 export type DetailInfoTypes = 'user' | 'market'
-export type FormType = 'loan' | 'collateral' | 'leverage'
-export type LoanFormType = 'loan-increase' | 'loan-decrease' | 'loan-liquidate'
-export type CollateralFormType = 'collateral-increase' | 'collateral-decrease'
-export type LeverageFormType = 'leverage-borrow-more'
 
 export type FormStatus = {
   isApproved: boolean
diff --git a/apps/main/src/lend/components/PageVault/Page.tsx b/apps/main/src/lend/components/PageVault/Page.tsx
index c93412ea6b..8aa4162fa3 100644
--- a/apps/main/src/lend/components/PageVault/Page.tsx
+++ b/apps/main/src/lend/components/PageVault/Page.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
 import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
 import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
-import Vault from '@/lend/components/PageVault/index'
+import { VaultTabs } from '@/lend/components/PageVault/VaultTabs'
 import { useOneWayMarket } from '@/lend/entities/chain'
 import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
 import { useMarketDetails } from '@/lend/hooks/useMarketDetails'
@@ -36,7 +36,7 @@ const { Spacing } = SizesAndSpaces
 
 const Page = () => {
   const params = useParams<MarketUrlParams>()
-  const { rMarket, rChainId, rFormType } = parseMarketParams(params)
+  const { rMarket, rChainId } = parseMarketParams(params)
   const { connect, provider } = useWallet()
   const { llamaApi: api = null, connectState } = useConnection()
   const titleMapper = useTitleMapper()
@@ -99,7 +99,6 @@ const Page = () => {
     params,
     rChainId,
     rOwmId,
-    rFormType,
     isLoaded,
     api,
     market,
@@ -108,10 +107,7 @@ const Page = () => {
   }
 
   const borrowPathnameFn = loanExists ? getLoanManagePathname : getLoanCreatePathname
-  const positionDetailsHrefs = {
-    borrow: borrowPathnameFn(params, rOwmId, ''),
-    supply: '',
-  }
+  const positionDetailsHrefs = { borrow: borrowPathnameFn(params, rOwmId), supply: '' }
   const hasSupplyPosition = (supplyPositionDetails.shares.value ?? 0) > 0
 
   return isSuccess && !market ? (
@@ -119,7 +115,7 @@ const Page = () => {
   ) : provider ? (
     <>
       <DetailPageStack>
-        <AppPageFormsWrapper>{rChainId && rOwmId && <Vault {...pageProps} params={params} />}</AppPageFormsWrapper>
+        <AppPageFormsWrapper>{rChainId && rOwmId && <VaultTabs {...pageProps} params={params} />}</AppPageFormsWrapper>
         <Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
           <CampaignRewardsBanner
             chainId={rChainId}
diff --git a/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx b/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx
index 1d8ec1b20b..695a6f43b6 100644
--- a/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultDepositMint/index.tsx
@@ -29,7 +29,8 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultDepositMint = ({ rChainId, rOwmId, rFormType, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const VaultDepositMint = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'deposit'
   const isSubscribed = useRef(false)
   const marketAlert = useMarketAlert(rChainId, rOwmId)
 
@@ -176,7 +177,7 @@ const VaultDepositMint = ({ rChainId, rOwmId, rFormType, isLoaded, api, market,
 
   // steps
   useEffect(() => {
-    if (isLoaded && api && market && rFormType) {
+    if (isLoaded && api && market) {
       const updatedSteps = getSteps(activeKey, rFormType, api, market, formStatus, formValues, steps)
       setSteps(updatedSteps)
     }
diff --git a/apps/main/src/lend/components/PageVault/VaultStake/index.tsx b/apps/main/src/lend/components/PageVault/VaultStake/index.tsx
index 7a20024fdd..c88b03bf1c 100644
--- a/apps/main/src/lend/components/PageVault/VaultStake/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultStake/index.tsx
@@ -24,7 +24,8 @@ import { t } from '@ui-kit/lib/i18n'
 import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultStake = ({ rChainId, rOwmId, rFormType, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const VaultStake = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'stake'
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.vaultStake.activeKey)
diff --git a/apps/main/src/lend/components/PageVault/VaultTabs.tsx b/apps/main/src/lend/components/PageVault/VaultTabs.tsx
new file mode 100644
index 0000000000..49e8e0ba1f
--- /dev/null
+++ b/apps/main/src/lend/components/PageVault/VaultTabs.tsx
@@ -0,0 +1,32 @@
+import VaultClaim from '@/lend/components/PageVault/VaultClaim'
+import VaultDepositMint from '@/lend/components/PageVault/VaultDepositMint'
+import VaultStake from '@/lend/components/PageVault/VaultStake'
+import VaultUnstake from '@/lend/components/PageVault/VaultUnstake'
+import VaultWithdrawRedeem from '@/lend/components/PageVault/VaultWithdrawRedeem'
+import { type MarketUrlParams, PageContentProps } from '@/lend/types/lend.types'
+import { t } from '@ui-kit/lib/i18n'
+import { FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+
+type VaultProps = PageContentProps<MarketUrlParams>
+
+const menu = [
+  {
+    value: 'deposit',
+    label: t`Deposit`,
+    subTabs: [
+      { value: 'deposit', label: t`Deposit`, component: VaultDepositMint },
+      { value: 'stake', label: t`Stake`, component: VaultStake },
+    ],
+  },
+  {
+    value: 'withdraw',
+    label: t`Withdraw`,
+    subTabs: [
+      { value: 'withdraw', label: t`Withdraw`, component: VaultWithdrawRedeem },
+      { value: 'unstake', label: t`Unstake`, component: VaultUnstake },
+      { value: 'claim', label: t`Claim Rewards`, component: VaultClaim },
+    ],
+  },
+] satisfies FormTab<VaultProps>[]
+
+export const VaultTabs = (pageProps: VaultProps) => <FormTabs params={pageProps} menu={menu} shouldWrap />
diff --git a/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx b/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx
index 94278d61f5..4949ab340f 100644
--- a/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultUnstake/index.tsx
@@ -23,7 +23,8 @@ import { t } from '@ui-kit/lib/i18n'
 import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultUnstake = ({ rChainId, rOwmId, rFormType, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const VaultUnstake = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'unstake'
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.vaultUnstake.activeKey)
diff --git a/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx b/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx
index b44ea416ba..e4a2d01044 100644
--- a/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx
+++ b/apps/main/src/lend/components/PageVault/VaultWithdrawRedeem/index.tsx
@@ -27,15 +27,8 @@ import { t } from '@ui-kit/lib/i18n'
 import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-const VaultWithdrawRedeem = ({
-  rChainId,
-  rOwmId,
-  rFormType,
-  isLoaded,
-  api,
-  market,
-  userActiveKey,
-}: PageContentProps) => {
+const VaultWithdrawRedeem = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+  const rFormType = 'withdraw'
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.vaultWithdrawRedeem.activeKey)
diff --git a/apps/main/src/lend/components/PageVault/index.tsx b/apps/main/src/lend/components/PageVault/index.tsx
deleted file mode 100644
index a9e44c57c5..0000000000
--- a/apps/main/src/lend/components/PageVault/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import VaultClaim from '@/lend/components/PageVault/VaultClaim'
-import VaultDepositMint from '@/lend/components/PageVault/VaultDepositMint'
-import VaultStake from '@/lend/components/PageVault/VaultStake'
-import VaultUnstake from '@/lend/components/PageVault/VaultUnstake'
-import VaultWithdrawRedeem from '@/lend/components/PageVault/VaultWithdrawRedeem'
-import {
-  type MarketUrlParams,
-  PageContentProps,
-  type VaultDepositFormType,
-  type VaultWithdrawFormType,
-} from '@/lend/types/lend.types'
-import { getVaultPathname } from '@/lend/utils/utilsRouter'
-import Stack from '@mui/material/Stack'
-import { AppFormContentWrapper } from '@ui/AppForm'
-import { useNavigate } from '@ui-kit/hooks/router'
-import { t } from '@ui-kit/lib/i18n'
-import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
-
-type FormType = 'deposit' | 'withdraw'
-
-const tabs: TabOption<FormType>[] = [
-  { value: 'deposit', label: t`Deposit` },
-  { value: 'withdraw', label: t`Withdraw` },
-]
-
-const tabsDeposit: TabOption<VaultDepositFormType>[] = [
-  { value: 'deposit', label: t`Deposit` },
-  { value: 'stake', label: t`Stake` },
-]
-
-const tabsWithdraw: TabOption<VaultWithdrawFormType>[] = [
-  { value: 'withdraw', label: t`Withdraw` },
-  { value: 'unstake', label: t`Unstake` },
-  { value: 'claim', label: t`Claim Rewards` },
-]
-
-const Vault = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
-  const { rOwmId, rFormType, params } = pageProps
-  const push = useNavigate()
-
-  type SubTab = VaultDepositFormType | VaultWithdrawFormType
-  const [subTab, setSubTab] = useState<SubTab>('deposit')
-
-  const subTabs = useMemo(() => (!rFormType || rFormType === 'deposit' ? tabsDeposit : tabsWithdraw), [rFormType])
-  useEffect(() => setSubTab(subTabs[0]?.value), [subTabs])
-
-  return (
-    <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
-      <TabsSwitcher
-        variant="contained"
-        size="medium"
-        value={!rFormType ? 'deposit' : rFormType}
-        onChange={(key) => push(getVaultPathname(params, rOwmId, key))}
-        options={tabs}
-        fullWidth
-      />
-
-      <TabsSwitcher variant="underlined" size="small" value={subTab} onChange={setSubTab} options={subTabs} fullWidth />
-
-      <AppFormContentWrapper>
-        {subTab === 'deposit' && <VaultDepositMint {...pageProps} rFormType="deposit" />}
-        {subTab === 'stake' && <VaultStake {...pageProps} rFormType="stake" />}
-        {subTab === 'withdraw' && <VaultWithdrawRedeem {...pageProps} rFormType="withdraw" />}
-        {subTab === 'unstake' && <VaultUnstake {...pageProps} rFormType="unstake" />}
-        {subTab === 'claim' && <VaultClaim {...pageProps} rFormType="claim" />}
-      </AppFormContentWrapper>
-    </Stack>
-  )
-}
-
-export default Vault
diff --git a/apps/main/src/lend/constants.ts b/apps/main/src/lend/constants.ts
index cac97898b8..06c99b8b98 100644
--- a/apps/main/src/lend/constants.ts
+++ b/apps/main/src/lend/constants.ts
@@ -1,13 +1,19 @@
 import { LEND_ROUTES } from '@ui-kit/shared/routes'
 
-export const ROUTE = {
-  ...LEND_ROUTES,
-  PAGE_INTEGRATIONS: '/integrations',
+export const MARKET_ROUTES = {
   PAGE_CREATE: '/create',
   PAGE_MANAGE: '/manage',
   PAGE_VAULT: '/vault',
+} as const
+
+export type LendMarketRoute = (typeof MARKET_ROUTES)[keyof typeof MARKET_ROUTES]
+
+export const ROUTE = {
+  ...LEND_ROUTES,
+  PAGE_INTEGRATIONS: '/integrations',
+  ...MARKET_ROUTES,
   PAGE_404: '/404',
-}
+} as const
 
 // TODO: translation
 export const NOFITY_MESSAGE = {
diff --git a/apps/main/src/lend/hooks/useBorrowPositionDetails.ts b/apps/main/src/lend/hooks/useBorrowPositionDetails.ts
index b465193a93..653c9dff10 100644
--- a/apps/main/src/lend/hooks/useBorrowPositionDetails.ts
+++ b/apps/main/src/lend/hooks/useBorrowPositionDetails.ts
@@ -34,11 +34,19 @@ export const useBorrowPositionDetails = ({
 }: UseBorrowPositionDetailsProps): BorrowPositionDetailsProps => {
   const { controller } = market?.addresses ?? {}
   const { address: userAddress } = useAccount()
-  const { data: userLoanDetails, isLoading: isUserLoanDetailsLoading } = useUserLoanDetails({
+  const { data: loanExists } = useLoanExists({
     chainId,
     marketId,
     userAddress,
   })
+  const { data: userLoanDetails, isLoading: isUserLoanDetailsLoading } = useUserLoanDetails(
+    {
+      chainId,
+      marketId,
+      userAddress,
+    },
+    !!loanExists,
+  )
   const {
     bands,
     health,
@@ -49,11 +57,6 @@ export const useBorrowPositionDetails = ({
     state: { collateral, borrowed, debt } = {},
   } = userLoanDetails ?? {}
   const prices = useStore((state) => state.markets.pricesMapper[chainId]?.[marketId])
-  const { data: loanExists } = useLoanExists({
-    chainId,
-    marketId,
-    userAddress,
-  })
   const { data: userPnl, isLoading: isUserPnlLoading } = useUserPnl({
     chainId,
     marketId,
diff --git a/apps/main/src/lend/types/lend.types.ts b/apps/main/src/lend/types/lend.types.ts
index 3da350ce59..9f3639f2af 100644
--- a/apps/main/src/lend/types/lend.types.ts
+++ b/apps/main/src/lend/types/lend.types.ts
@@ -19,7 +19,7 @@ export type EstimatedGas = number | number[] | null
 export type OneWayMarketTemplate = LendMarketTemplate // todo: use LendMarketTemplate consistently
 
 export type NetworkUrlParams = { network: NetworkEnum }
-export type MarketUrlParams = NetworkUrlParams & { market: string; formType?: RFormType }
+export type MarketUrlParams = NetworkUrlParams & { market: string }
 export type UrlParams = NetworkUrlParams & Partial<MarketUrlParams>
 
 export interface NetworkConfig<TId extends string = string, TChainId extends number = number> extends BaseConfig<
@@ -80,17 +80,10 @@ export type ExpectedBorrowed = {
   avgPrice: string
 }
 
-export type VaultCreateFormType = 'create' | 'leverage'
-export type VaultDepositFormType = 'deposit' | 'stake'
-export type VaultWithdrawFormType = 'withdraw' | 'unstake' | 'claim'
-export type VaultManageFormType = 'loan' | 'collateral'
-export type RFormType = VaultCreateFormType | VaultDepositFormType | VaultWithdrawFormType | VaultManageFormType | ''
-
-export type PageContentProps = {
-  params: UrlParams
+export type PageContentProps<T = UrlParams> = {
+  params: T
   rChainId: ChainId
   rOwmId: string
-  rFormType: RFormType
   userActiveKey: string
   isLoaded: boolean
   api: LlamaApi | null
diff --git a/apps/main/src/lend/utils/helpers.ts b/apps/main/src/lend/utils/helpers.ts
index 72f14081fe..141a72dd62 100644
--- a/apps/main/src/lend/utils/helpers.ts
+++ b/apps/main/src/lend/utils/helpers.ts
@@ -30,14 +30,6 @@ export function getErrorMessage(error: CustomError, defaultErrorMessage: string)
   return errorMessage
 }
 
-export function scrollToTop() {
-  window.scroll({
-    top: 0,
-    left: 0,
-    behavior: 'smooth',
-  })
-}
-
 export function fulfilledValue<T>(result: PromiseSettledResult<T>) {
   if (result.status === 'fulfilled') {
     return result.value
diff --git a/apps/main/src/lend/utils/utilsRouter.ts b/apps/main/src/lend/utils/utilsRouter.ts
index 2c490a76f1..ac2bbde7c8 100644
--- a/apps/main/src/lend/utils/utilsRouter.ts
+++ b/apps/main/src/lend/utils/utilsRouter.ts
@@ -1,4 +1,4 @@
-import { ROUTE } from '@/lend/constants'
+import { type LendMarketRoute, ROUTE } from '@/lend/constants'
 import { networksIdMapper } from '@/lend/networks'
 import { type MarketUrlParams, NetworkUrlParams, type UrlParams } from '@/lend/types/lend.types'
 import { getInternalUrl, LLAMALEND_ROUTES } from '@ui-kit/shared/routes'
@@ -9,17 +9,19 @@ export const getPath = ({ network }: UrlParams, route: string) => getInternalUrl
 export const getCollateralListPathname = ({ network }: NetworkUrlParams) =>
   getInternalUrl('llamalend', network, LLAMALEND_ROUTES.PAGE_MARKETS)
 
-export const getLoanCreatePathname = (params: UrlParams, owmId: string, formType: string) =>
-  getPath(params, `${ROUTE.PAGE_MARKETS}/${owmId}${ROUTE.PAGE_CREATE}${formType === 'create' ? '' : `/${formType}`}`)
+const getMarketPathname = ({ network }: UrlParams, marketId: string, page: LendMarketRoute) =>
+  `${getInternalUrl('lend', network, ROUTE.PAGE_MARKETS)}/${marketId}${page}`
 
-export const getLoanManagePathname = (params: UrlParams, owmId: string, formType: string) =>
-  getPath(params, `${ROUTE.PAGE_MARKETS}/${owmId}${ROUTE.PAGE_MANAGE}/${formType}`)
+export const getLoanCreatePathname = (params: UrlParams, marketId: string) =>
+  getMarketPathname(params, marketId, ROUTE.PAGE_CREATE)
 
-export const getVaultPathname = (params: UrlParams, owmId: string, formType: string) =>
-  getPath(params, `${ROUTE.PAGE_MARKETS}/${owmId}${ROUTE.PAGE_VAULT}${formType === 'vault' ? '' : `/${formType}`}`)
+export const getLoanManagePathname = (params: UrlParams, marketId: string) =>
+  getMarketPathname(params, marketId, ROUTE.PAGE_MANAGE)
 
-export const parseMarketParams = ({ formType, market, network }: MarketUrlParams) => ({
+export const getVaultPathname = (params: UrlParams, marketId: string) =>
+  getMarketPathname(params, marketId, ROUTE.PAGE_VAULT)
+
+export const parseMarketParams = ({ market, network }: MarketUrlParams) => ({
   rMarket: market.toLowerCase(),
   rChainId: networksIdMapper[network],
-  rFormType: formType ?? '',
 })
diff --git a/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx b/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx
index e220cdcd39..2b7996d65b 100644
--- a/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx
+++ b/apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx
@@ -25,7 +25,7 @@ export const AddCollateralForm = <ChainId extends IChainId>({
   networks: NetworkDict<ChainId>
   chainId: ChainId
   enabled?: boolean
-  onAdded: NonNullable<AddCollateralOptions['onAdded']>
+  onAdded?: NonNullable<AddCollateralOptions['onAdded']>
 }) => {
   const network = networks[chainId]
   const [isOpen, , , toggle] = useSwitch(false)
diff --git a/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx b/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx
index 627257bccf..9041ad73ab 100644
--- a/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx
+++ b/apps/main/src/llamalend/features/manage-loan/components/RemoveCollateralForm.tsx
@@ -27,7 +27,7 @@ export const RemoveCollateralForm = <ChainId extends IChainId>({
   networks: NetworkDict<ChainId>
   chainId: ChainId
   enabled?: boolean
-  onRemoved: NonNullable<RemoveCollateralOptions['onRemoved']>
+  onRemoved?: NonNullable<RemoveCollateralOptions['onRemoved']>
 }) => {
   const network = networks[chainId]
   const [isOpen, , , toggle] = useSwitch(false)
diff --git a/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx b/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
index ea5a326864..2a3eead762 100644
--- a/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
+++ b/apps/main/src/llamalend/features/manage-loan/components/RepayForm.tsx
@@ -20,12 +20,18 @@ export const RepayForm = <ChainId extends IChainId>({
   chainId,
   enabled,
   onRepaid,
+  fromCollateral,
+  fromWallet,
+  fromBorrowed,
 }: {
   market: LlamaMarketTemplate | undefined
   networks: NetworkDict<ChainId>
   chainId: ChainId
   enabled?: boolean
-  onRepaid: NonNullable<RepayOptions['onRepaid']>
+  onRepaid?: RepayOptions['onRepaid']
+  fromCollateral?: boolean
+  fromWallet?: boolean
+  fromBorrowed?: boolean
 }) => {
   const network = networks[chainId]
   const [isOpen, , , toggle] = useSwitch(false)
@@ -86,33 +92,39 @@ export const RepayForm = <ChainId extends IChainId>({
       }
     >
       <Stack divider={<InputDivider />}>
-        <LoanFormTokenInput
-          label={t`From collateral (position)`}
-          token={collateralToken}
-          blockchainId={network.id}
-          name="stateCollateral"
-          form={form}
-          testId="repay-state-collateral-input"
-          network={network}
-        />
-        <LoanFormTokenInput
-          label={t`From collateral (wallet)`}
-          token={collateralToken}
-          blockchainId={network.id}
-          name="userCollateral"
-          form={form}
-          testId="repay-user-collateral-input"
-          network={network}
-        />
-        <LoanFormTokenInput
-          label={t`From borrowed token`}
-          token={borrowToken}
-          blockchainId={network.id}
-          name="userBorrowed"
-          form={form}
-          testId="repay-user-borrowed-input"
-          network={network}
-        />
+        {fromCollateral && (
+          <LoanFormTokenInput
+            label={t`From collateral (position)`}
+            token={collateralToken}
+            blockchainId={network.id}
+            name="stateCollateral"
+            form={form}
+            testId="repay-state-collateral-input"
+            network={network}
+          />
+        )}
+        {fromWallet && (
+          <LoanFormTokenInput
+            label={t`From collateral (wallet)`}
+            token={collateralToken}
+            blockchainId={network.id}
+            name="userCollateral"
+            form={form}
+            testId="repay-user-collateral-input"
+            network={network}
+          />
+        )}
+        {fromBorrowed && (
+          <LoanFormTokenInput
+            label={t`From borrowed token`}
+            token={borrowToken}
+            blockchainId={network.id}
+            name="userBorrowed"
+            form={form}
+            testId="repay-user-borrowed-input"
+            network={network}
+          />
+        )}
       </Stack>
 
       <Button type="submit" loading={isPending || !market} disabled={isDisabled} data-testid="repay-submit-button">
diff --git a/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts b/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts
index 2aebb351fb..26ee807448 100644
--- a/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts
+++ b/apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts
@@ -36,7 +36,7 @@ export const useAddCollateralForm = <ChainId extends LlamaChainId>({
   network: LlamaNetwork<ChainId>
   networks: NetworkDict<ChainId>
   enabled?: boolean
-  onAdded: NonNullable<AddCollateralOptions['onAdded']>
+  onAdded?: NonNullable<AddCollateralOptions['onAdded']>
 }) => {
   const { address: userAddress } = useAccount()
   const { chainId } = network
diff --git a/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts b/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts
index 2328dd7aa2..50735074b6 100644
--- a/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts
+++ b/apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts
@@ -43,7 +43,7 @@ export const useRemoveCollateralForm = <
   network: BaseConfig<NetworkName, ChainId>
   networks: NetworkDict<ChainId>
   enabled?: boolean
-  onRemoved: NonNullable<RemoveCollateralOptions['onRemoved']>
+  onRemoved?: NonNullable<RemoveCollateralOptions['onRemoved']>
 }) => {
   const { address: userAddress } = useAccount()
   const { chainId } = network
diff --git a/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts b/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
index 067ed4054e..946c29aa21 100644
--- a/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
+++ b/apps/main/src/llamalend/features/manage-loan/hooks/useRepayForm.ts
@@ -37,7 +37,7 @@ export const useRepayForm = <ChainId extends LlamaChainId, NetworkName extends L
   network: { id: LlamaNetworkId; chainId: ChainId }
   networks: NetworkDict<ChainId>
   enabled?: boolean
-  onRepaid: NonNullable<RepayOptions['onRepaid']>
+  onRepaid?: RepayOptions['onRepaid']
 }) => {
   const { address: userAddress } = useAccount()
   const { chainId } = network
diff --git a/apps/main/src/llamalend/mutations/repay.mutation.ts b/apps/main/src/llamalend/mutations/repay.mutation.ts
index 44fc7c3156..1aba4a27c9 100644
--- a/apps/main/src/llamalend/mutations/repay.mutation.ts
+++ b/apps/main/src/llamalend/mutations/repay.mutation.ts
@@ -20,7 +20,7 @@ type RepayMutation = { stateCollateral: Decimal; userCollateral: Decimal; userBo
 export type RepayOptions = {
   marketId: string | undefined
   network: { id: LlamaNetworkId; chainId: LlamaChainId }
-  onRepaid: LlammaMutationOptions<RepayMutation>['onSuccess']
+  onRepaid?: LlammaMutationOptions<RepayMutation>['onSuccess']
   onReset?: () => void
   userAddress: Address | undefined
 }
diff --git a/apps/main/src/llamalend/mutations/useLlammaMutation.ts b/apps/main/src/llamalend/mutations/useLlammaMutation.ts
index 261dbb1335..4abb634f60 100644
--- a/apps/main/src/llamalend/mutations/useLlammaMutation.ts
+++ b/apps/main/src/llamalend/mutations/useLlammaMutation.ts
@@ -70,7 +70,7 @@ export type LlammaMutationOptions<TVariables extends object, TData extends Resul
   /** Message to display on success */
   successMessage: (variables: TVariables, context: Context) => string
   /** Callback executed on successful mutation */
-  onSuccess: (
+  onSuccess?: (
     data: TData,
     receipt: FormattedTransactionReceipt,
     variables: TVariables,
@@ -130,7 +130,7 @@ export function useLlammaMutation<TVariables extends object, TData extends Resul
       updateUserEventsApi(wallet!, { id: networkId }, context.market, receipt.transactionHash)
       await invalidateAllUserMarketDetails({ chainId, marketId, userAddress })
       onReset?.()
-      await onSuccess(data, receipt, variables, context)
+      await onSuccess?.(data, receipt, variables, context)
     },
     onError: (error, variables, context) => {
       logError(mutationKey, { error, variables, marketId: context?.market.id })
diff --git a/apps/main/src/loan/components/PageLoanCreate/index.tsx b/apps/main/src/loan/components/PageLoanCreate/index.tsx
index c2c7851abd..6a27973b91 100644
--- a/apps/main/src/loan/components/PageLoanCreate/index.tsx
+++ b/apps/main/src/loan/components/PageLoanCreate/index.tsx
@@ -55,7 +55,7 @@ const LoanCreate = ({
   const onUpdate = useOnFormUpdate(props)
   const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
 
-  const onCreated: CreateLoanOptions['onCreated'] = useCallback(
+  const onCreated: NonNullable<CreateLoanOptions['onCreated']> = useCallback(
     async (_data, _receipt, { slippage, leverageEnabled }: BorrowMutation) =>
       curve && llamma && (await onLoanCreated(curve, leverageEnabled, llamma, slippage)),
     [curve, llamma, onLoanCreated],
diff --git a/apps/main/src/loan/components/PageLoanManage/index.tsx b/apps/main/src/loan/components/PageLoanManage/index.tsx
index 991b5dd60e..481e69d179 100644
--- a/apps/main/src/loan/components/PageLoanManage/index.tsx
+++ b/apps/main/src/loan/components/PageLoanManage/index.tsx
@@ -103,6 +103,9 @@ const LoanManage = ({ curve, isReady, llamma, llammaId, params, rChainId, rColla
               market={llamma}
               enabled={isReady}
               onRepaid={async () => {}}
+              fromBorrowed
+              fromCollateral
+              fromWallet
             />
           )}
           {subTab === 'loan-liquidate' && <LoanLiquidate {...formProps} params={params} />}
diff --git a/apps/main/src/routes/lend.routes.tsx b/apps/main/src/routes/lend.routes.tsx
index 4d729d6638..6b0a942f70 100644
--- a/apps/main/src/routes/lend.routes.tsx
+++ b/apps/main/src/routes/lend.routes.tsx
@@ -32,7 +32,7 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network',
-    loader: ({ params: { network } }) => redirectTo(`/lend/${network}/markets/`),
+    loader: ({ params: { network } }) => redirectTo(`/lend/${network}/markets`),
     ...layoutProps,
   }),
   createRoute({
@@ -58,20 +58,17 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/markets',
-    loader: ({ params: { network } }) => redirectTo(`/llamalend/${network}/markets/`),
+    loader: ({ params: { network } }) => redirectTo(`/llamalend/${network}/markets`),
     ...layoutProps,
   }),
   createRoute({
     path: '$network/markets/$market',
-    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/manage/`),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/manage`),
     ...layoutProps,
   }),
   createRoute({
     path: '$network/markets/$market/create/$formType',
-    component: PageLoanCreate,
-    head: ({ params }) => ({
-      meta: [{ title: `Create - ${params.market} - Curve Llamalend` }],
-    }),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/create`),
     ...layoutProps,
   }),
   createRoute({
@@ -84,10 +81,7 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/markets/$market/manage/$formType',
-    component: PageLoanManage,
-    head: ({ params }) => ({
-      meta: [{ title: `Manage - ${params.market} - Curve Llamalend` }],
-    }),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/manage`),
     ...layoutProps,
   }),
   createRoute({
@@ -100,10 +94,7 @@ export const lendRoutes = lendLayoutRoute.addChildren([
   }),
   createRoute({
     path: '$network/markets/$market/vault/$formType',
-    component: PageVault,
-    head: ({ params }) => ({
-      meta: [{ title: `Supply - ${params.market} - Curve Llamalend` }],
-    }),
+    loader: ({ params: { network, market } }) => redirectTo(`/lend/${network}/markets/${market}/vault`),
     ...layoutProps,
   }),
   createRoute({
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
new file mode 100644
index 0000000000..26d56d4d73
--- /dev/null
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -0,0 +1,117 @@
+import { type ComponentType, type ReactNode, useState } from 'react'
+import { notFalsy } from '@curvefi/prices-api/objects.util'
+import Stack from '@mui/material/Stack'
+import { AppFormContentWrapper } from '@ui/AppForm'
+import { type TabOption, TabsSwitcher } from '@ui-kit/shared/ui/TabsSwitcher'
+import { WithWrapper } from '@ui-kit/shared/ui/WithWrapper'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+
+const { MaxWidth } = SizesAndSpaces
+
+type FnOrValue<Props extends object, Result> = ((props: Props) => Result | undefined) | Result
+
+const applyFnOrValue = <Props extends object, R extends string | boolean>(
+  fnOrValue: FnOrValue<Props, R> | undefined,
+  props: Props,
+): R | undefined => (typeof fnOrValue === 'function' ? fnOrValue(props) : fnOrValue)
+
+type FormSubTab<Props extends object> = Omit<FormTab<Props>, 'subTabs'>
+
+export type FormTab<Props extends object> = {
+  /** Unique value of the tab, it might be used in the URL later */
+  value: string
+  /** Label of the tab, can be a function that receives the form props */
+  label: FnOrValue<Props, string>
+  /** Optional sub-tabs of the tab */
+  subTabs?: FormSubTab<Props>[]
+  /** Function or value to determine if the tab is visible */
+  visible?: FnOrValue<Props, boolean>
+  /** Function or value to determine if the tab is disabled */
+  disabled?: FnOrValue<Props, boolean>
+  /** Component to render when the tab is selected */
+  component?: ComponentType<Props>
+}
+
+const createOptions = <Props extends object>(
+  tabs: FormSubTab<Props>[] | undefined,
+  params: Props,
+): TabOption<string>[] =>
+  tabs
+    ?.filter(({ visible }) => applyFnOrValue(visible, params) !== false)
+    .map(({ value, label, disabled }) => ({
+      value,
+      label: applyFnOrValue(label, params),
+      disabled: applyFnOrValue(disabled, params),
+    })) ?? []
+
+const selectVisible = <Props extends object, Tab extends FormSubTab<Props>>(
+  tabs: Tab[],
+  key: string | undefined,
+  params: Props,
+) => {
+  const visible = tabs.filter(({ visible }) => applyFnOrValue(visible, params) !== false)
+  const result = visible.find(({ value }) => value === key) ?? visible[0]
+  if (!result) throw new Error(`No visible tab found for key ${key} in menu ${tabs.map((t) => t.value).join(', ')}`)
+  return result
+}
+
+type UseFormTabOptions<T extends object> = {
+  menu: FormTab<T>[]
+  params: T
+}
+
+/** Hook to manage form tabs and sub-tabs. */
+function useFormTabs<T extends object>({ menu, params }: UseFormTabOptions<T>) {
+  const [tabKey, onChangeTab] = useState<string>()
+  const [subTabKey, onChangeSubTab] = useState<string>()
+  const tab = selectVisible(menu, tabKey, params)
+  const tabs = createOptions(menu, params)
+  const subTab = tab.subTabs && selectVisible(tab.subTabs, subTabKey, params)
+  const subTabs = createOptions(tab.subTabs, params)
+
+  const components = notFalsy(subTab?.component, tab.component)
+  if (components.length != 1) throw new Error(`${components.length} components found for [${tabKey}, ${subTabKey}]`)
+
+  return { tab, tabs, subTabs, subTab, Component: components[0], onChangeTab, onChangeSubTab }
+}
+
+/**
+ * Adds a background to the form content. In the new forms we don't show the background at this level,
+ * we still render AppFormContentWrapper there. However, in the new forms the accordion stays outside the background,
+ * but is still co-located with the form content.
+ */
+const LegacyFormWrapper = ({ children }: { children: ReactNode }) => (
+  <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
+    <AppFormContentWrapper>{children}</AppFormContentWrapper>
+  </Stack>
+)
+
+/**
+ * Form wrapper that displays tabs and handles tab switching. It supports sub-tabs as well.
+ */
+export function FormTabs<T extends object>({ shouldWrap, ...options }: UseFormTabOptions<T> & { shouldWrap: boolean }) {
+  const { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab } = useFormTabs(options)
+  return (
+    <Stack
+      sx={{ width: { mobile: '100%', tablet: MaxWidth.actionCard }, marginInline: { mobile: 'auto', desktop: 0 } }}
+    >
+      <TabsSwitcher variant="contained" size="medium" value={tab.value} options={tabs} onChange={onChangeTab} />
+
+      {subTab && (
+        <TabsSwitcher
+          variant="underlined"
+          size="small"
+          value={subTab.value}
+          options={subTabs}
+          fullWidth
+          sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}
+          onChange={onChangeSubTab}
+        />
+      )}
+
+      <WithWrapper shouldWrap={shouldWrap} Wrapper={LegacyFormWrapper}>
+        <Component {...options.params} />
+      </WithWrapper>
+    </Stack>
+  )
+}
diff --git a/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx b/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx
new file mode 100644
index 0000000000..ac00e77f21
--- /dev/null
+++ b/packages/curve-ui-kit/src/shared/ui/stories/FormTabs.stories.tsx
@@ -0,0 +1,171 @@
+import { Stack, Typography } from '@mui/material'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { FormTabs } from '../FormTabs/FormTabs'
+
+type DemoParams = {
+  availableBalance: number
+  canWithdraw: boolean
+  showAdvanced: boolean
+  userAddress: string
+}
+
+const Panel = ({ title, body }: { title: string; body: string }) => (
+  <Stack gap={1} sx={{ padding: 3, borderRadius: 2, border: (t) => `1px solid ${t.palette.divider}` }}>
+    <Typography variant="headingSBold">{title}</Typography>
+    <Typography variant="bodyMRegular">{body}</Typography>
+  </Stack>
+)
+
+const OverviewTab = ({ availableBalance, userAddress }: DemoParams) => (
+  <Panel
+    title="Overview"
+    body={`Connected as ${userAddress}. Available balance: ${availableBalance.toLocaleString()} crvUSD.`}
+  />
+)
+
+const DepositTab = ({ availableBalance }: DemoParams) => (
+  <Panel
+    title="Deposit"
+    body={`Use this tab for simple flows. Balance shown in labels comes from props (${availableBalance.toLocaleString()} crvUSD).`}
+  />
+)
+
+const WithdrawTab = ({ canWithdraw }: DemoParams) => (
+  <Panel
+    title="Withdraw"
+    body={
+      canWithdraw
+        ? 'Withdraw actions are available and the sub-tab is enabled.'
+        : 'This sub-tab shows the disabled state when withdrawals are locked.'
+    }
+  />
+)
+
+const AdvancedTab = () => <Panel title="Advanced" body="Conditional tab that appears when enabled." />
+
+type StoryArgs = DemoParams & { shouldWrap: boolean }
+
+const FormTabsStory = ({ shouldWrap, ...params }: StoryArgs) => (
+  <FormTabs<DemoParams>
+    params={params}
+    shouldWrap={shouldWrap}
+    menu={[
+      {
+        value: 'overview',
+        label: 'Overview',
+        visible: () => true,
+        component: OverviewTab,
+      },
+      {
+        value: 'manage',
+        label: ({ availableBalance }) => `Manage (${availableBalance.toLocaleString()} crvUSD)`,
+        visible: () => true,
+        subTabs: [
+          { value: 'deposit', label: 'Deposit', visible: () => true, component: DepositTab },
+          {
+            value: 'withdraw',
+            label: ({ canWithdraw }) => (canWithdraw ? 'Withdraw' : 'Withdraw (locked)'),
+            visible: () => true,
+            disabled: ({ canWithdraw }) => !canWithdraw,
+            component: WithdrawTab,
+          },
+        ],
+      },
+      {
+        value: 'advanced',
+        label: 'Advanced',
+        visible: ({ showAdvanced }) => showAdvanced,
+        component: AdvancedTab,
+      },
+    ]}
+  />
+)
+
+const meta: Meta<typeof FormTabsStory> = {
+  title: 'UI Kit/Widgets/FormTabs',
+  component: FormTabsStory,
+  args: {
+    availableBalance: 1250,
+    canWithdraw: true,
+    showAdvanced: false,
+    userAddress: '0x1234...cafe',
+    shouldWrap: false,
+  },
+  argTypes: {
+    availableBalance: {
+      control: { type: 'number', min: 0 },
+      description: 'Value forwarded to labels and tab content.',
+    },
+    canWithdraw: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the Withdraw sub-tab.',
+    },
+    showAdvanced: {
+      control: 'boolean',
+      description: 'Controls visibility of the Advanced tab.',
+    },
+    userAddress: {
+      control: 'text',
+      description: 'Sample address injected into tab content.',
+    },
+    shouldWrap: {
+      control: 'boolean',
+      description: 'Renders content with the legacy AppForm wrapper background.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FormTabs renders primary and nested tabs with optional visibility and disabled states. This story showcases the possible states with sample content.',
+      },
+    },
+  },
+}
+
+type Story = StoryObj<typeof FormTabsStory>
+
+export const BasicTabs: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default layout with nested Manage sub-tabs and dynamic labels.',
+      },
+    },
+  },
+}
+
+export const WithConditionalTab: Story = {
+  args: { showAdvanced: true },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Advanced tab appears when visibility is enabled.',
+      },
+    },
+  },
+}
+
+export const WithDisabledSubTab: Story = {
+  args: { canWithdraw: false },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Withdraw sub-tab rendered disabled to highlight the disabled state handling.',
+      },
+    },
+  },
+}
+
+export const LegacyWrapped: Story = {
+  args: { shouldWrap: true },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Illustrates the legacy AppForm background applied via shouldWrap.',
+      },
+    },
+  },
+}
+
+export default meta

From f787ee096aea2995e56fd8a7b0fcac30ca0f3e06 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Fri, 5 Dec 2025 15:31:20 +0100
Subject: [PATCH 02/10] fix: typo

---
 apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index ee4e2ad5a4..55da05a243 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -38,7 +38,7 @@ const LendManageLegacyMenu = [
   },
   {
     value: 'collateral',
-    label: t`Borrow`,
+    label: t`Collateral`,
     subTabs: [
       { value: 'collateral-increase', label: t`Add collateral`, component: LoanCollateralAdd },
       { value: 'collateral-decrease', label: t`Remove collateral`, component: LoanCollateralRemove },

From c1564e51a021641fca1f67c70f45daf5abe55268 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Tue, 9 Dec 2025 11:21:49 +0100
Subject: [PATCH 03/10] fix: separate leverage for borrow more

---
 .../PageLoanManage/LoanBorrowMore/index.tsx        | 14 +++++++++++---
 .../components/PageLoanManage/ManageLoanTabs.tsx   |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
index 0c655bf6f7..92e5e0bf53 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
@@ -21,7 +21,6 @@ import useStore from '@/lend/store/useStore'
 import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
 import { _showNoLoanFound } from '@/lend/utils/helpers'
 import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
-import { hasLeverage } from '@/llamalend/llama.utils'
 import type { HealthMode } from '@/llamalend/llamalend.types'
 import { useLoanExists } from '@/llamalend/queries/loan-exists'
 import Stack from '@mui/material/Stack'
@@ -42,9 +41,18 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
 
-const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
+const LoanBorrowMore = ({
+  rChainId,
+  rOwmId,
+  isLoaded,
+  api,
+  market,
+  userActiveKey,
+  isLeverage = false,
+}: PageContentProps & {
+  isLeverage?: boolean
+}) => {
   const isSubscribed = useRef(false)
-  const isLeverage = !!market && hasLeverage(market)
   const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
   const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
   const detailInfoLeverage = useStore((state) => state.loanBorrowMore.detailInfoLeverage[activeKey])
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index 55da05a243..c9f868ccb0 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -48,7 +48,7 @@ const LendManageLegacyMenu = [
     value: 'leverage',
     label: t`Leverage`,
     visible: ({ market }) => market?.leverage?.hasLeverage(),
-    component: LoanBorrowMore,
+    component: (props) => <LoanBorrowMore {...props} isLeverage />,
   },
 ] satisfies FormTab<ManageLoanProps>[]
 

From 0f4f08bb568979773332ebf497d7b243a4000e15 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 10 Dec 2025 10:03:27 +0100
Subject: [PATCH 04/10] fix: add leverage tab in beta mode

---
 .../components/PageLoanManage/LoanBorrowMore/index.tsx    | 8 ++++----
 .../src/lend/components/PageLoanManage/ManageLoanTabs.tsx | 6 ++++++
 packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx | 2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
index 92e5e0bf53..65a9ad2b8f 100644
--- a/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx
@@ -41,6 +41,8 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
 
+export type LoanBorrowMoreProps = PageContentProps & { isLeverage?: boolean }
+
 const LoanBorrowMore = ({
   rChainId,
   rOwmId,
@@ -49,9 +51,7 @@ const LoanBorrowMore = ({
   market,
   userActiveKey,
   isLeverage = false,
-}: PageContentProps & {
-  isLeverage?: boolean
-}) => {
+}: LoanBorrowMoreProps) => {
   const isSubscribed = useRef(false)
   const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
   const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
@@ -442,7 +442,7 @@ export default LoanBorrowMore
 /**
  * The new implementation of LoanBorrowMore with mui isn't ready yet. For now, we wrap the old one for styling.
  */
-export const LoanBorrowMoreWrapped = (props: PageContentProps) => (
+export const LoanBorrowMoreWrapped = (props: LoanBorrowMoreProps) => (
   <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
     <AppFormContentWrapper>
       <LoanBorrowMore {...props} />
diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index c9f868ccb0..5bdc8e7358 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -74,6 +74,12 @@ const LendManageNewMenu = [
       { value: 'remove', label: t`Remove`, component: LoanRemoveCollateralTab },
     ],
   },
+  {
+    value: 'leverage',
+    label: t`Leverage`,
+    visible: ({ market }) => market?.leverage?.hasLeverage(),
+    component: (props) => <LoanBorrowMoreWrapped {...props} isLeverage />,
+  },
 ] satisfies FormTab<ManageLoanProps>[]
 
 const LendManageSoftLiquidationMenu = [
diff --git a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
index 26d56d4d73..82f6e5b320 100644
--- a/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx
@@ -97,7 +97,7 @@ export function FormTabs<T extends object>({ shouldWrap, ...options }: UseFormTa
     >
       <TabsSwitcher variant="contained" size="medium" value={tab.value} options={tabs} onChange={onChangeTab} />
 
-      {subTab && (
+      {subTab && subTabs.length > 1 && (
         <TabsSwitcher
           variant="underlined"
           size="small"

From f943e123bc838914d07105c4e43fe7d9e7892362 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 10 Dec 2025 10:05:15 +0100
Subject: [PATCH 05/10] fix: tab name

---
 .../src/lend/components/PageLoanManage/ManageLoanTabs.tsx   | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
index 5bdc8e7358..51aee3eb16 100644
--- a/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanManage/ManageLoanTabs.tsx
@@ -53,11 +53,7 @@ const LendManageLegacyMenu = [
 ] satisfies FormTab<ManageLoanProps>[]
 
 const LendManageNewMenu = [
-  {
-    value: 'borrow',
-    label: ({ market }) => (market?.leverage?.hasLeverage() ? t`Leverage` : t`Borrow`),
-    component: LoanBorrowMoreWrapped,
-  },
+  { value: 'borrow', label: t`Borrow`, component: LoanBorrowMoreWrapped },
   {
     value: 'repay',
     label: t`Repay`,

From c478da45e9d2c587f1e94e688851efd33ead6059 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Wed, 10 Dec 2025 10:34:15 +0100
Subject: [PATCH 06/10] fix: increase lite network timeouts

---
 tests/cypress/e2e/main/basic.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/e2e/main/basic.cy.ts b/tests/cypress/e2e/main/basic.cy.ts
index 1ddc7c613b..01e233c90c 100644
--- a/tests/cypress/e2e/main/basic.cy.ts
+++ b/tests/cypress/e2e/main/basic.cy.ts
@@ -1,5 +1,5 @@
 import { oneOf } from '@cy/support/generators'
-import { LOAD_TIMEOUT } from '@cy/support/ui'
+import { API_LOAD_TIMEOUT, LOAD_TIMEOUT } from '@cy/support/ui'
 
 describe('Basic Access Test', () => {
   const path = oneOf('/', '/dex')
@@ -40,7 +40,7 @@ describe('Basic Access Test', () => {
     cy.visitWithoutTestConnector('dex/corn/pools')
     cy.title(LOAD_TIMEOUT).should('equal', 'Pools - Curve')
     cy.url().should('include', '/dex/corn/pools')
-    cy.contains(/LBTC\/wBTCN/i, LOAD_TIMEOUT).should('be.visible')
+    cy.contains(/LBTC\/wBTCN/i, API_LOAD_TIMEOUT).should('be.visible')
   })
 
   it('shows 404 on /dex/:network/pools/404', () => {

From b58cb6f10a5184e70a5b429e23d3de666416d12c Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Thu, 11 Dec 2025 22:21:04 +0100
Subject: [PATCH 07/10] fix: query validation

---
 .../borrow/components/CreateLoanForm.tsx      |  2 --
 .../components/CreateLoanInfoAccordion.tsx    | 13 +++-----
 .../borrow/hooks/useCreateLoanForm.tsx        |  1 -
 .../borrow-create-loan-approved.query.ts      |  2 +-
 .../create-loan-approve-estimate-gas.query.ts |  2 +-
 .../create-loan/create-loan-bands.query.ts    |  2 +-
 .../create-loan-expected-collateral.query.ts  |  2 +-
 .../create-loan/create-loan-health.query.ts   |  2 +-
 .../create-loan-price-impact.query.ts         |  2 +-
 .../create-loan/create-loan-prices.query.ts   |  8 +++--
 .../create-loan-route-image.query.ts          |  2 +-
 .../validation/borrow-fields.validation.ts    |  6 ++++
 .../queries/validation/borrow.validation.ts   | 32 +++++++++----------
 13 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx b/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx
index 4be08fc370..5c492ea218 100644
--- a/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx
+++ b/apps/main/src/llamalend/features/borrow/components/CreateLoanForm.tsx
@@ -68,7 +68,6 @@ export const CreateLoanForm = <ChainId extends IChainId>({
     creationError,
     txHash,
     formErrors,
-    tooMuchDebt,
     isApproved,
   } = useCreateLoanForm({ market, network, preset, onCreated })
   const setRange = useCallback((range: number) => form.setValue('range', range, setValueOptions), [form])
@@ -84,7 +83,6 @@ export const CreateLoanForm = <ChainId extends IChainId>({
           values={values}
           collateralToken={collateralToken}
           borrowToken={borrowToken}
-          tooMuchDebt={tooMuchDebt}
           networks={networks}
           onSlippageChange={(value) => form.setValue('slippage', value, setValueOptions)}
         />
diff --git a/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx b/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx
index 923d4c3934..c87167052e 100644
--- a/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx
+++ b/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx
@@ -25,7 +25,6 @@ export const CreateLoanInfoAccordion = <ChainId extends IChainId>({
   values: { range, slippage, leverageEnabled },
   collateralToken,
   borrowToken,
-  tooMuchDebt,
   networks,
   onSlippageChange,
 }: {
@@ -33,20 +32,18 @@ export const CreateLoanInfoAccordion = <ChainId extends IChainId>({
   values: BorrowForm
   collateralToken: Token | undefined
   borrowToken: Token | undefined
-  tooMuchDebt: boolean
   networks: NetworkDict<ChainId>
   onSlippageChange: (newSlippage: Decimal) => void
 }) => {
   const [isOpen, , , toggle] = useSwitch(false)
-
   return (
     <LoanInfoAccordion
       isOpen={isOpen}
       toggle={toggle}
       range={range}
-      health={useCreateLoanHealth(params, !tooMuchDebt)}
-      bands={useCreateLoanBands(params, isOpen && !tooMuchDebt)}
-      prices={useCreateLoanPrices(params, isOpen && !tooMuchDebt)}
+      health={useCreateLoanHealth(params)}
+      bands={useCreateLoanBands(params, isOpen)}
+      prices={useCreateLoanPrices(params, isOpen)}
       prevRates={useMarketRates(params, isOpen)}
       rates={useMarketFutureRates(params, isOpen)}
       loanToValue={useLoanToValue(
@@ -57,11 +54,11 @@ export const CreateLoanInfoAccordion = <ChainId extends IChainId>({
         },
         isOpen,
       )}
-      gas={useCreateLoanEstimateGas(networks, params, isOpen && !tooMuchDebt)}
+      gas={useCreateLoanEstimateGas(networks, params, isOpen)}
       leverage={{
         enabled: leverageEnabled,
         expectedCollateral: useCreateLoanExpectedCollateral(params, isOpen && leverageEnabled),
-        maxReceive: useCreateLoanMaxReceive(params, isOpen && leverageEnabled && !tooMuchDebt),
+        maxReceive: useCreateLoanMaxReceive(params, isOpen && leverageEnabled),
         priceImpact: useCreateLoanPriceImpact(params, isOpen && leverageEnabled),
         slippage,
         onSlippageChange,
diff --git a/apps/main/src/llamalend/features/borrow/hooks/useCreateLoanForm.tsx b/apps/main/src/llamalend/features/borrow/hooks/useCreateLoanForm.tsx
index 9a7792c955..b3c19988fd 100644
--- a/apps/main/src/llamalend/features/borrow/hooks/useCreateLoanForm.tsx
+++ b/apps/main/src/llamalend/features/borrow/hooks/useCreateLoanForm.tsx
@@ -83,7 +83,6 @@ export function useCreateLoanForm<ChainId extends LlamaChainId>({
     creationError,
     txHash: data?.hash,
     isApproved: useBorrowCreateLoanIsApproved(params),
-    tooMuchDebt: !!form.formState.errors['maxDebt'],
     formErrors: useFormErrors(form.formState),
   }
 }
diff --git a/apps/main/src/llamalend/queries/create-loan/borrow-create-loan-approved.query.ts b/apps/main/src/llamalend/queries/create-loan/borrow-create-loan-approved.query.ts
index ec6b33a524..46b523c9aa 100644
--- a/apps/main/src/llamalend/queries/create-loan/borrow-create-loan-approved.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/borrow-create-loan-approved.query.ts
@@ -27,5 +27,5 @@ export const { useQuery: useBorrowCreateLoanIsApproved, fetchQuery: fetchBorrowC
       : await market.createLoanIsApproved(userCollateral)
   },
   staleTime: '1m',
-  validationSuite: borrowQueryValidationSuite,
+  validationSuite: borrowQueryValidationSuite({ debtRequired: false }), // doesn't use debt or maxDebt
 })
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-approve-estimate-gas.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-approve-estimate-gas.query.ts
index 273bfea7f3..a9535ea25c 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-approve-estimate-gas.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-approve-estimate-gas.query.ts
@@ -36,7 +36,7 @@ const { useQuery: useCreateLoanApproveEstimateGas } = queryFactory({
           ? await market.leverageV2.estimateGas.createLoanApprove(userCollateral, userBorrowed)
           : await market.leverage.estimateGas.createLoanApprove(userCollateral)
   },
-  validationSuite: borrowQueryValidationSuite,
+  validationSuite: borrowQueryValidationSuite({ debtRequired: false }), // doesn't use debt or maxDebt
   dependencies: (params) => [createLoanMaxReceiveKey(params)],
 })
 
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-bands.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-bands.query.ts
index 13f8679a91..be27d4fc99 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-bands.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-bands.query.ts
@@ -45,7 +45,7 @@ export const { useQuery: useCreateLoanBands } = queryFactory({
       : market.createLoanBands(userCollateral, debt, range)
   },
   staleTime: '1m',
-  validationSuite: borrowQueryValidationSuite,
+  validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
   dependencies: (params) => [
     createLoanMaxReceiveKey(params),
     ...(params.leverageEnabled ? [createLoanExpectedCollateralQueryKey(params)] : []),
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts
index be8698d837..2e80815e64 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts
@@ -79,5 +79,5 @@ export const { useQuery: useCreateLoanExpectedCollateral, queryKey: createLoanEx
       return convertNumbers({ userCollateral, leverage, totalCollateral: collateral })
     },
     staleTime: '1m',
-    validationSuite: borrowQueryValidationSuite,
+    validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
   })
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-health.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-health.query.ts
index 24ec015617..76f730f849 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-health.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-health.query.ts
@@ -47,7 +47,7 @@ export const { useQuery: useCreateLoanHealth } = queryFactory({
     )!
   },
   staleTime: '1m',
-  validationSuite: borrowQueryValidationSuite,
+  validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
   dependencies: (params) => [
     createLoanMaxReceiveKey(params),
     ...(params.leverageEnabled ? [createLoanExpectedCollateralQueryKey(params)] : []),
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts
index e74cb4b24e..861d8c9e56 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts
@@ -30,6 +30,6 @@ export const { useQuery: useCreateLoanPriceImpact } = queryFactory({
         : +(await market.leverage.priceImpact(userCollateral, debt))
   },
   staleTime: '1m',
-  validationSuite: borrowQueryValidationSuite,
+  validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
   dependencies: (params) => [createLoanExpectedCollateralQueryKey(params)],
 })
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-prices.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-prices.query.ts
index 9b5a62a70c..dfa08ff9ca 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-prices.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-prices.query.ts
@@ -3,12 +3,12 @@ import { LendMarketTemplate } from '@curvefi/llamalend-api/lib/lendMarkets'
 import { type FieldsOf } from '@ui-kit/lib'
 import { queryFactory, rootKeys } from '@ui-kit/lib/model'
 import { Decimal } from '@ui-kit/utils'
-import type { BorrowFormQuery } from '../../features/borrow/types'
+import type { BorrowForm, BorrowFormQuery } from '../../features/borrow/types'
 import { borrowQueryValidationSuite } from '../validation/borrow.validation'
 import { createLoanExpectedCollateralQueryKey } from './create-loan-expected-collateral.query'
 import { createLoanMaxReceiveKey } from './create-loan-max-receive.query'
 
-type BorrowPricesReceiveQuery = BorrowFormQuery
+type BorrowPricesReceiveQuery = BorrowFormQuery & Pick<BorrowForm, 'maxDebt'>
 type BorrowPricesReceiveParams = FieldsOf<BorrowPricesReceiveQuery>
 
 type BorrowPricesResult = [Decimal, Decimal]
@@ -23,6 +23,7 @@ export const { useQuery: useCreateLoanPrices } = queryFactory({
     debt = '0',
     leverageEnabled,
     range,
+    maxDebt,
   }: BorrowPricesReceiveParams) =>
     [
       ...rootKeys.market({ chainId, marketId }),
@@ -32,6 +33,7 @@ export const { useQuery: useCreateLoanPrices } = queryFactory({
       { debt },
       { leverageEnabled },
       { range },
+      { maxDebt },
     ] as const,
   queryFn: async ({
     marketId,
@@ -51,7 +53,7 @@ export const { useQuery: useCreateLoanPrices } = queryFactory({
           : convertNumbers(await market.leverage.createLoanPrices(userCollateral, debt, range))
   },
   staleTime: '1m',
-  validationSuite: borrowQueryValidationSuite,
+  validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
   dependencies: (params) => [
     createLoanMaxReceiveKey(params),
     ...(params.leverageEnabled ? [createLoanExpectedCollateralQueryKey(params)] : []),
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-route-image.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-route-image.query.ts
index eccb7e2155..6e5bc2f521 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-route-image.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-route-image.query.ts
@@ -16,5 +16,5 @@ export const { useQuery: useCreateLoanRouteImage } = queryFactory({
         : null
   },
   staleTime: '1m',
-  validationSuite: borrowQueryValidationSuite,
+  validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
 })
diff --git a/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts b/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts
index e81f90261e..1e961440dc 100644
--- a/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts
+++ b/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts
@@ -42,6 +42,12 @@ export const validateMaxDebt = (debt: Decimal | undefined | null, maxDebt: Decim
   })
 }
 
+export const validateMaxDebtIsSet = (maxDebt: Decimal | undefined | null) => {
+  test('debt', 'Maximum debt must be calculated before debt can be validated', () => {
+    enforce(maxDebt).isNotNullish()
+  })
+}
+
 export const validateMaxCollateral = (
   userCollateral: Decimal | undefined | null,
   maxCollateral: Decimal | undefined | null,
diff --git a/apps/main/src/llamalend/queries/validation/borrow.validation.ts b/apps/main/src/llamalend/queries/validation/borrow.validation.ts
index d05df09d03..96d955eb84 100644
--- a/apps/main/src/llamalend/queries/validation/borrow.validation.ts
+++ b/apps/main/src/llamalend/queries/validation/borrow.validation.ts
@@ -1,20 +1,23 @@
 import { group } from 'vest'
+import type { Suite } from 'vest'
 import {
   validateDebt,
   validateMaxCollateral,
   validateMaxDebt,
+  validateMaxDebtIsSet,
   validateRange,
   validateSlippage,
   validateUserBorrowed,
   validateUserCollateral,
 } from '@/llamalend/queries/validation/borrow-fields.validation'
+import type { IChainId } from '@curvefi/llamalend-api/lib/interfaces'
 import { createValidationSuite, type FieldsOf } from '@ui-kit/lib'
 import { marketIdValidationSuite } from '@ui-kit/lib/model/query/market-id-validation'
 import { type BorrowForm, type BorrowFormQueryParams } from '../../features/borrow/types'
 
 export const borrowFormValidationGroup = (
   { userBorrowed, userCollateral, debt, range, slippage, maxDebt, maxCollateral }: FieldsOf<BorrowForm>,
-  { debtRequired = true }: { debtRequired?: boolean } = {},
+  { debtRequired = true, isMaxDebtRequired = false }: { debtRequired?: boolean; isMaxDebtRequired?: boolean } = {},
 ) =>
   group('borrowFormValidationGroup', () => {
     validateUserBorrowed(userBorrowed)
@@ -24,25 +27,22 @@ export const borrowFormValidationGroup = (
     validateRange(range)
     validateMaxDebt(debt, maxDebt)
     validateMaxCollateral(userCollateral, maxCollateral)
+    if (isMaxDebtRequired) {
+      validateMaxDebtIsSet(maxDebt)
+    }
   })
 
 export const borrowFormValidationSuite = createValidationSuite(borrowFormValidationGroup)
 
-export const borrowQueryValidationSuite = createValidationSuite(
-  ({
-    chainId,
-    leverageEnabled,
-    marketId,
-    userBorrowed,
-    userCollateral,
-    debt,
-    range,
-    slippage,
-  }: BorrowFormQueryParams) => {
+export const borrowQueryValidationSuite = ({
+  debtRequired = true,
+  isMaxDebtRequired = debtRequired,
+}: { debtRequired?: boolean; isMaxDebtRequired?: boolean } = {}): Suite<keyof BorrowFormQueryParams, string> =>
+  createValidationSuite((params: BorrowFormQueryParams & { maxDebt?: FieldsOf<BorrowForm>['maxDebt'] }) => {
+    const { chainId, leverageEnabled, marketId, userBorrowed, userCollateral, debt, range, slippage, maxDebt } = params
     marketIdValidationSuite({ chainId, marketId })
     borrowFormValidationGroup(
-      { userBorrowed, userCollateral, debt, range, slippage, leverageEnabled },
-      { debtRequired: true },
+      { userBorrowed, userCollateral, debt, range, slippage, leverageEnabled, maxDebt },
+      { debtRequired, isMaxDebtRequired },
     )
-  },
-)
+  }) as Suite<keyof BorrowFormQueryParams<IChainId>, string>

From 292d5e2d68d06083579bc76cef80e6e90db5f93b Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Fri, 12 Dec 2025 15:24:35 +0100
Subject: [PATCH 08/10] fix: leverage enabled validation

---
 .../components/CreateLoanInfoAccordion.tsx    |  6 +--
 .../create-loan-expected-collateral.query.ts  |  4 +-
 .../create-loan-max-receive.query.ts          | 12 +++++-
 .../create-loan-price-impact.query.ts         | 12 +++++-
 .../validation/borrow-fields.validation.ts    | 38 ++++++++++++-------
 .../queries/validation/borrow.validation.ts   | 37 ++++++++++++------
 6 files changed, 76 insertions(+), 33 deletions(-)

diff --git a/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx b/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx
index c87167052e..0165c5c20e 100644
--- a/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx
+++ b/apps/main/src/llamalend/features/borrow/components/CreateLoanInfoAccordion.tsx
@@ -57,9 +57,9 @@ export const CreateLoanInfoAccordion = <ChainId extends IChainId>({
       gas={useCreateLoanEstimateGas(networks, params, isOpen)}
       leverage={{
         enabled: leverageEnabled,
-        expectedCollateral: useCreateLoanExpectedCollateral(params, isOpen && leverageEnabled),
-        maxReceive: useCreateLoanMaxReceive(params, isOpen && leverageEnabled),
-        priceImpact: useCreateLoanPriceImpact(params, isOpen && leverageEnabled),
+        expectedCollateral: useCreateLoanExpectedCollateral(params, isOpen),
+        maxReceive: useCreateLoanMaxReceive(params, isOpen),
+        priceImpact: useCreateLoanPriceImpact(params, isOpen),
         slippage,
         onSlippageChange,
         collateralSymbol: collateralToken?.symbol,
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts
index 2e80815e64..4318c81870 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-expected-collateral.query.ts
@@ -46,6 +46,7 @@ export const { useQuery: useCreateLoanExpectedCollateral, queryKey: createLoanEx
       userCollateral = '0',
       debt,
       slippage,
+      leverageEnabled,
     }: BorrowFormQueryParams) =>
       [
         ...rootKeys.market({ chainId, marketId }),
@@ -54,6 +55,7 @@ export const { useQuery: useCreateLoanExpectedCollateral, queryKey: createLoanEx
         { userBorrowed },
         { debt },
         { slippage },
+        { leverageEnabled },
       ] as const,
     queryFn: async ({
       marketId,
@@ -79,5 +81,5 @@ export const { useQuery: useCreateLoanExpectedCollateral, queryKey: createLoanEx
       return convertNumbers({ userCollateral, leverage, totalCollateral: collateral })
     },
     staleTime: '1m',
-    validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
+    validationSuite: borrowQueryValidationSuite({ isLeverageRequired: true }), // requires debt, maxDebt, and leverageEnabled
   })
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-max-receive.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-max-receive.query.ts
index 97ab0f4242..0a75940dc7 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-max-receive.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-max-receive.query.ts
@@ -39,10 +39,18 @@ const convertNumbers = ({
 })
 
 export const maxReceiveValidation = createValidationSuite(
-  ({ chainId, marketId, userBorrowed, userCollateral, range, slippage }: CreateLoanMaxReceiveParams) => {
+  ({
+    chainId,
+    marketId,
+    userBorrowed,
+    userCollateral,
+    range,
+    slippage,
+    leverageEnabled,
+  }: CreateLoanMaxReceiveParams) => {
     marketIdValidationSuite({ chainId, marketId })
     borrowFormValidationGroup(
-      { userBorrowed, userCollateral, debt: undefined, range, slippage },
+      { userBorrowed, userCollateral, debt: undefined, range, slippage, leverageEnabled },
       { debtRequired: false },
     )
   },
diff --git a/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts b/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts
index 861d8c9e56..db06062cd0 100644
--- a/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts
+++ b/apps/main/src/llamalend/queries/create-loan/create-loan-price-impact.query.ts
@@ -8,13 +8,21 @@ import { createLoanExpectedCollateralQueryKey } from './create-loan-expected-col
 type BorrowPriceImpactResult = number // percentage
 
 export const { useQuery: useCreateLoanPriceImpact } = queryFactory({
-  queryKey: ({ chainId, marketId, userBorrowed = '0', userCollateral = '0', debt = '0' }: BorrowFormQueryParams) =>
+  queryKey: ({
+    chainId,
+    marketId,
+    userBorrowed = '0',
+    userCollateral = '0',
+    debt = '0',
+    leverageEnabled,
+  }: BorrowFormQueryParams) =>
     [
       ...rootKeys.market({ chainId, marketId }),
       'createLoanPriceImpact',
       { userCollateral },
       { userBorrowed },
       { debt },
+      { leverageEnabled },
     ] as const,
   queryFn: async ({
     marketId,
@@ -30,6 +38,6 @@ export const { useQuery: useCreateLoanPriceImpact } = queryFactory({
         : +(await market.leverage.priceImpact(userCollateral, debt))
   },
   staleTime: '1m',
-  validationSuite: borrowQueryValidationSuite(), // requires debt and maxDebt
+  validationSuite: borrowQueryValidationSuite({ isLeverageRequired: true }), // requires debt, maxDebt, and leverageEnabled
   dependencies: (params) => [createLoanExpectedCollateralQueryKey(params)],
 })
diff --git a/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts b/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts
index 1e961440dc..435449f51a 100644
--- a/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts
+++ b/apps/main/src/llamalend/queries/validation/borrow-fields.validation.ts
@@ -1,4 +1,4 @@
-import { enforce, test } from 'vest'
+import { enforce, test, skipWhen } from 'vest'
 import { BORROW_PRESET_RANGES } from '@/llamalend/constants'
 import { Decimal } from '@ui-kit/utils'
 
@@ -15,10 +15,10 @@ export const validateUserCollateral = (userCollateral: Decimal | undefined | nul
 }
 
 export const validateDebt = (debt: Decimal | undefined | null, required: boolean = true) => {
-  test('debt', `Debt must be a positive number${required ? '' : ' or null'}`, () => {
-    if (required || debt != null) {
+  skipWhen(!required && debt == null, () => {
+    test('debt', `Debt must be a positive number${required ? '' : ' or null'}`, () => {
       enforce(debt).isNumeric().gt(0)
-    }
+    })
   })
 }
 
@@ -34,17 +34,27 @@ export const validateRange = (range: number | null | undefined, { MaxLtv, Safe }
   })
 }
 
-export const validateMaxDebt = (debt: Decimal | undefined | null, maxDebt: Decimal | undefined | null) => {
-  test('debt', 'Debt must be less than or equal to maximum borrowable amount', () => {
-    if (debt != null && maxDebt != null) {
+export const validateMaxDebt = (
+  debt: Decimal | undefined | null,
+  maxDebt: Decimal | undefined | null,
+  isMaxDebtRequired: boolean,
+) => {
+  skipWhen(!isMaxDebtRequired, () => {
+    test('maxDebt', 'Maximum debt must be calculated before debt can be validated', () => {
+      enforce(maxDebt).isNotNullish()
+    })
+  })
+  skipWhen(maxDebt == null || debt == null, () => {
+    test('debt', 'Debt must be less than or equal to maximum borrowable amount', () => {
+      enforce(maxDebt).isNotNullish()
       enforce(debt).lte(maxDebt)
-    }
+    })
   })
 }
 
-export const validateMaxDebtIsSet = (maxDebt: Decimal | undefined | null) => {
-  test('debt', 'Maximum debt must be calculated before debt can be validated', () => {
-    enforce(maxDebt).isNotNullish()
+export const validateLeverageEnabled = (leverageEnabled: boolean | undefined | null, isLeverageRequired: boolean) => {
+  test('leverageEnabled', 'Leverage must be enabled', () => {
+    enforce(leverageEnabled).equals(true)
   })
 }
 
@@ -52,10 +62,10 @@ export const validateMaxCollateral = (
   userCollateral: Decimal | undefined | null,
   maxCollateral: Decimal | undefined | null,
 ) => {
-  test('userCollateral', 'Collateral must be less than or equal to your wallet balance', () => {
-    if (userCollateral != null && maxCollateral != null) {
+  skipWhen(userCollateral == null || maxCollateral == null, () => {
+    test('userCollateral', 'Collateral must be less than or equal to your wallet balance', () => {
       enforce(userCollateral).lte(maxCollateral)
-    }
+    })
   })
 }
 
diff --git a/apps/main/src/llamalend/queries/validation/borrow.validation.ts b/apps/main/src/llamalend/queries/validation/borrow.validation.ts
index 96d955eb84..a2a7d3a60f 100644
--- a/apps/main/src/llamalend/queries/validation/borrow.validation.ts
+++ b/apps/main/src/llamalend/queries/validation/borrow.validation.ts
@@ -2,22 +2,34 @@ import { group } from 'vest'
 import type { Suite } from 'vest'
 import {
   validateDebt,
+  validateLeverageEnabled,
   validateMaxCollateral,
   validateMaxDebt,
-  validateMaxDebtIsSet,
   validateRange,
   validateSlippage,
   validateUserBorrowed,
   validateUserCollateral,
 } from '@/llamalend/queries/validation/borrow-fields.validation'
-import type { IChainId } from '@curvefi/llamalend-api/lib/interfaces'
 import { createValidationSuite, type FieldsOf } from '@ui-kit/lib'
 import { marketIdValidationSuite } from '@ui-kit/lib/model/query/market-id-validation'
 import { type BorrowForm, type BorrowFormQueryParams } from '../../features/borrow/types'
 
 export const borrowFormValidationGroup = (
-  { userBorrowed, userCollateral, debt, range, slippage, maxDebt, maxCollateral }: FieldsOf<BorrowForm>,
-  { debtRequired = true, isMaxDebtRequired = false }: { debtRequired?: boolean; isMaxDebtRequired?: boolean } = {},
+  {
+    userBorrowed,
+    userCollateral,
+    debt,
+    range,
+    slippage,
+    maxDebt,
+    maxCollateral,
+    leverageEnabled,
+  }: FieldsOf<BorrowForm>,
+  {
+    debtRequired = true,
+    isMaxDebtRequired = false,
+    isLeverageRequired = false,
+  }: { debtRequired?: boolean; isMaxDebtRequired?: boolean; isLeverageRequired?: boolean } = {},
 ) =>
   group('borrowFormValidationGroup', () => {
     validateUserBorrowed(userBorrowed)
@@ -25,11 +37,9 @@ export const borrowFormValidationGroup = (
     validateDebt(debt, debtRequired)
     validateSlippage(slippage)
     validateRange(range)
-    validateMaxDebt(debt, maxDebt)
+    validateMaxDebt(debt, maxDebt, isMaxDebtRequired)
     validateMaxCollateral(userCollateral, maxCollateral)
-    if (isMaxDebtRequired) {
-      validateMaxDebtIsSet(maxDebt)
-    }
+    validateLeverageEnabled(leverageEnabled, isLeverageRequired)
   })
 
 export const borrowFormValidationSuite = createValidationSuite(borrowFormValidationGroup)
@@ -37,12 +47,17 @@ export const borrowFormValidationSuite = createValidationSuite(borrowFormValidat
 export const borrowQueryValidationSuite = ({
   debtRequired = true,
   isMaxDebtRequired = debtRequired,
-}: { debtRequired?: boolean; isMaxDebtRequired?: boolean } = {}): Suite<keyof BorrowFormQueryParams, string> =>
+  isLeverageRequired = false,
+}: {
+  debtRequired?: boolean
+  isMaxDebtRequired?: boolean
+  isLeverageRequired?: boolean
+} = {}): Suite<keyof BorrowFormQueryParams, string> =>
   createValidationSuite((params: BorrowFormQueryParams & { maxDebt?: FieldsOf<BorrowForm>['maxDebt'] }) => {
     const { chainId, leverageEnabled, marketId, userBorrowed, userCollateral, debt, range, slippage, maxDebt } = params
     marketIdValidationSuite({ chainId, marketId })
     borrowFormValidationGroup(
       { userBorrowed, userCollateral, debt, range, slippage, leverageEnabled, maxDebt },
-      { debtRequired, isMaxDebtRequired },
+      { debtRequired, isMaxDebtRequired, isLeverageRequired },
     )
-  }) as Suite<keyof BorrowFormQueryParams<IChainId>, string>
+  }) as Suite<keyof BorrowFormQueryParams, string>

From 475dce569c7d0b0909c8ae2fcf0d7474de1d2c82 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Fri, 12 Dec 2025 15:39:42 +0100
Subject: [PATCH 09/10] perf: throttle setFormValues

---
 .../PageLoanCreate/LoanCreateTabs.tsx         | 11 ++++--
 .../connect-wallet/lib/CurveProvider.tsx      | 37 +++++++++++--------
 .../curve-ui-kit/src/hooks/useDebounce.ts     |  2 +-
 .../src/shared/ui/LargeTokenInput.tsx         |  2 +-
 .../src/shared/ui/SliderInput.tsx             |  2 +-
 .../src/themes/design/0_primitives.ts         |  8 ++--
 packages/curve-ui-kit/src/utils/timers.ts     | 11 ++++++
 7 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
index c9bd29fe8a..f3b6c342d9 100644
--- a/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
+++ b/apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx
@@ -11,16 +11,18 @@ import { hasLeverage } from '@/llamalend/llama.utils'
 import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
 import { t } from '@ui-kit/lib/i18n'
 import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs'
+import { useThrottle } from '@ui-kit/utils/timers'
 
 type CreateLoanProps = PageContentProps<MarketUrlParams>
 
 /**
  * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`.
  */
-const useOnFormUpdate = ({ api, market }: Pick<CreateLoanProps, 'api' | 'market'>): OnBorrowFormUpdate =>
-  useCallback(
+const useOnFormUpdate = ({ api, market }: Pick<CreateLoanProps, 'api' | 'market'>): OnBorrowFormUpdate => {
+  const setFormValues = useThrottle(useStore((store) => store.loanCreate.setFormValues))
+  const setStateByKeys = useThrottle(useStore((store) => store.loanCreate.setStateByKeys))
+  return useCallback(
     async ({ debt, userCollateral, range, slippage, leverageEnabled }) => {
-      const { setFormValues, setStateByKeys } = useStore.getState().loanCreate
       const formValues: FormValues = {
         ...DEFAULT_FORM_VALUES,
         n: range,
@@ -30,8 +32,9 @@ const useOnFormUpdate = ({ api, market }: Pick<CreateLoanProps, 'api' | 'market'
       await setFormValues(api, market, formValues, `${slippage}`, leverageEnabled)
       setStateByKeys({ isEditLiqRange: true })
     },
-    [api, market],
+    [api, market, setFormValues, setStateByKeys],
   )
+}
 
 function CreateLoanTab({ market, api, rChainId }: CreateLoanProps) {
   const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
diff --git a/packages/curve-ui-kit/src/features/connect-wallet/lib/CurveProvider.tsx b/packages/curve-ui-kit/src/features/connect-wallet/lib/CurveProvider.tsx
index afdc508c5e..65e4dc8c42 100644
--- a/packages/curve-ui-kit/src/features/connect-wallet/lib/CurveProvider.tsx
+++ b/packages/curve-ui-kit/src/features/connect-wallet/lib/CurveProvider.tsx
@@ -12,6 +12,7 @@ import {
 } from '@ui-kit/features/connect-wallet/lib/types'
 import { useIsDocumentFocused } from '@ui-kit/features/layout/utils'
 import type { AppName } from '@ui-kit/shared/routes'
+import { useTraceProps } from '@ui-kit/utils/useTraceProps'
 import { globalLibs, isWalletMatching } from './utils'
 
 const { FAILURE, LOADING, HYDRATING, SUCCESS } = ConnectState
@@ -38,7 +39,7 @@ export const CurveProvider = <App extends AppName>({
 }) => {
   const [connectState, setConnectState] = useState<ConnectState>(LOADING)
   const walletChainId = useChainId()
-  const { switchChainAsync } = useSwitchChain()
+  const { mutateAsync: switchChainAsync } = useSwitchChain()
   const { wallet, provider, isReconnecting } = useWagmiWallet()
   const isFocused = useIsDocumentFocused()
   const libKey = AppLibs[app]
@@ -121,19 +122,23 @@ export const CurveProvider = <App extends AppName>({
   const llamaApi = globalLibs.getMatching('llamaApi', wallet, network?.chainId)
   const isHydrated = !!globalLibs.hydrated[app] && { curveApi, llamaApi }[libKey] === globalLibs.hydrated[app]
 
-  return (
-    <CurveContext.Provider
-      value={{
-        connectState,
-        network,
-        isHydrated,
-        ...(wallet && { wallet }),
-        ...(provider && { provider }),
-        ...(curveApi && { curveApi }),
-        ...(llamaApi && { llamaApi }),
-      }}
-    >
-      {children}
-    </CurveContext.Provider>
-  )
+  const value = {
+    connectState,
+    network,
+    isHydrated,
+    ...(wallet && { wallet }),
+    ...(provider && { provider }),
+    ...(curveApi && { curveApi }),
+    ...(llamaApi && { llamaApi }),
+  }
+  useTraceProps('CurveProvider', {
+    connectState,
+    network,
+    isHydrated,
+    wallet,
+    provider,
+    curveApi,
+    llamaApi,
+  })
+  return <CurveContext.Provider value={value}>{children}</CurveContext.Provider>
 }
diff --git a/packages/curve-ui-kit/src/hooks/useDebounce.ts b/packages/curve-ui-kit/src/hooks/useDebounce.ts
index 1e7fa509d6..262c8e76e2 100644
--- a/packages/curve-ui-kit/src/hooks/useDebounce.ts
+++ b/packages/curve-ui-kit/src/hooks/useDebounce.ts
@@ -79,7 +79,7 @@ export function useDebounce<T>(initialValue: T, debounceMs: number, callback: (v
  */
 export function useDebouncedValue<T>(
   givenValue: T,
-  { defaultValue = givenValue, debounceMs = Duration.FormDebounce }: { defaultValue?: T; debounceMs?: number } = {},
+  { defaultValue = givenValue, debounceMs = Duration.FormThrottle }: { defaultValue?: T; debounceMs?: number } = {},
 ) {
   const [value, setValue] = useState<T>(defaultValue)
   useEffect(() => {
diff --git a/packages/curve-ui-kit/src/shared/ui/LargeTokenInput.tsx b/packages/curve-ui-kit/src/shared/ui/LargeTokenInput.tsx
index c516047e26..0a525047d3 100644
--- a/packages/curve-ui-kit/src/shared/ui/LargeTokenInput.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/LargeTokenInput.tsx
@@ -257,7 +257,7 @@ export const LargeTokenInput = ({
   const [balance, setBalance, cancelSetBalance] = useUniqueDebounce({
     defaultValue: externalBalance,
     callback: onBalance,
-    debounceMs: Duration.FormDebounce,
+    debounceMs: Duration.FormThrottle,
     // We don't want to trigger onBalance if the value is effectively the same, e.g. "0.0" and "0.00"
     equals: bigNumEquals,
   })
diff --git a/packages/curve-ui-kit/src/shared/ui/SliderInput.tsx b/packages/curve-ui-kit/src/shared/ui/SliderInput.tsx
index 6034085751..aa43ad13aa 100644
--- a/packages/curve-ui-kit/src/shared/ui/SliderInput.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/SliderInput.tsx
@@ -100,7 +100,7 @@ export const SliderInput = <T extends Decimal | DecimalRangeValue>({
   inputProps,
   sliderValueTransform,
   testId,
-  debounceMs = Duration.FormDebounce,
+  debounceMs = Duration.FormThrottle,
 }: SliderInputProps<T>) => {
   const isRange = isRangeValue(value)
   type SliderValue = T extends Decimal ? number : RangeValue
diff --git a/packages/curve-ui-kit/src/themes/design/0_primitives.ts b/packages/curve-ui-kit/src/themes/design/0_primitives.ts
index 1db05295b8..3c89d28230 100644
--- a/packages/curve-ui-kit/src/themes/design/0_primitives.ts
+++ b/packages/curve-ui-kit/src/themes/design/0_primitives.ts
@@ -134,13 +134,13 @@ export const Sizing = {
 } as const
 
 export const Duration = {
+  Delay: 100,
+  Flicker: 1000,
+  Focus: 50,
+  FormThrottle: 250,
   Snackbar: 6000,
   Tooltip: { Enter: 500, Exit: 500 },
-  Flicker: 1000,
-  FormDebounce: 500,
   Transition: 256,
-  Focus: 50,
-  Delay: 100,
 }
 
 export const TransitionFunction = `ease-out ${Duration.Transition}ms`
diff --git a/packages/curve-ui-kit/src/utils/timers.ts b/packages/curve-ui-kit/src/utils/timers.ts
index f9ebc44990..e0fc3c35fc 100644
--- a/packages/curve-ui-kit/src/utils/timers.ts
+++ b/packages/curve-ui-kit/src/utils/timers.ts
@@ -1,3 +1,7 @@
+import { throttle } from 'lodash'
+import { useMemo } from 'react'
+import { Duration } from '@ui-kit/themes/design/0_primitives'
+
 /**
  * Replaces setInterval using recursive setTimeout.
  * Returns a cancel function to stop future executions.
@@ -27,3 +31,10 @@ export function setTimeoutInterval(callback: () => unknown, delay: number): () =
     clearTimeout(timeoutId)
   }
 }
+
+/**
+ * Throttles a function using lodash throttle and memoizes it with useMemo.
+ * Important: the passed function should be stable between renders (e.g., static or wrapped in useCallback).
+ */
+export const useThrottle = <T extends (...args: any[]) => any>(f: T, duration = Duration.FormThrottle) =>
+  useMemo(() => throttle(f, duration), [f, duration])

From 5ee8d19c65a1d9a4668059fb40ed2c1f7f733d90 Mon Sep 17 00:00:00 2001
From: Daniel Schiavini <daniel.schiavini@gmail.com>
Date: Tue, 16 Dec 2025 09:11:11 +0100
Subject: [PATCH 10/10] chore: remove debug

---
 apps/main/src/llamalend/mutations/useLlammaMutation.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/main/src/llamalend/mutations/useLlammaMutation.ts b/apps/main/src/llamalend/mutations/useLlammaMutation.ts
index 686fefdb7d..6a474d7298 100644
--- a/apps/main/src/llamalend/mutations/useLlammaMutation.ts
+++ b/apps/main/src/llamalend/mutations/useLlammaMutation.ts
@@ -133,7 +133,6 @@ export function useLlammaMutation<TVariables extends object, TData extends Resul
       await onSuccess?.(data, receipt, variables, context)
     },
     onError: (error, variables, context) => {
-      console.error(`Error in mutation ${mutationKey}:`, error)
       logError(mutationKey, { error, variables, marketId: context?.market.id })
       notify(error.message, 'error')
     },