diff --git a/src/App.tsx b/src/App.tsx
index 0cfb466..fe8444c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,8 @@ import { Toaster } from './components/ui/toaster'
 import { TooltipProvider } from './components/ui/tooltip'
 import YieldPage from './pages/yield'
 import { OutputAmountProvider } from './store/OutputAmountContext'
+import Allocate from './pages/allocate'
+import Portfolio from './pages/portfolio'
 
 // todo: regenerate this and put in env
 const projectId = '42c7317ebec6e24c881a534d1d6b3ba0'
@@ -60,6 +62,10 @@ const router = createBrowserRouter([
         children: [
             {
                 path: '/',
+                element: <YieldPage />,
+            },
+            {
+                path: '/market',
                 element: <Home />,
             },
             {
@@ -74,6 +80,18 @@ const router = createBrowserRouter([
                 path: '/yield',
                 element: <YieldPage />,
             },
+            {
+                path: '/allocate',
+                element: <Allocate />,
+            },
+            {
+                path: '/portfolio',
+                element: <Portfolio />,
+            },
+            {
+                path: '/portfolio/:id',
+                element: <Portfolio />,
+            },
         ],
     },
 ])
diff --git a/src/actions/AllocateAction/index.tsx b/src/actions/AllocateAction/index.tsx
new file mode 100644
index 0000000..d856051
--- /dev/null
+++ b/src/actions/AllocateAction/index.tsx
@@ -0,0 +1,293 @@
+import React, { useEffect } from 'react'
+import { useAccount, useReadContract } from 'wagmi'
+import { erc20Abi, getAddress, parseAbi, zeroAddress } from 'viem'
+import { FetchStatus } from '@tanstack/react-query'
+
+import { useGraphQL } from '../../useGraphQL'
+import { MarketInfoQueryDocument } from '../../queries/markets'
+import TransactionButton from '@/components/TransactionButton'
+import { useTransactionStatus } from '@/components/TransactionButton/useTransactionStatus'
+import { rmmABI } from '@/lib/abis/rmm'
+import { useTradeRoute } from '@/lib/useTradeRoute'
+import { formatNumber, fromWad, toWad } from '@/utils/numbers'
+import { ETH_ADDRESS, useTokens } from '@/lib/useTokens'
+import { Skeleton } from '@/components/ui/skeleton'
+
+import ApproveAction from '../ApproveAction'
+import {
+    useSwapArgsSyAndPt,
+    useSwapExactTokenForYtArgs,
+} from '@/lib/useSwapArgs'
+import { useMintSyArgs } from '@/lib/useMintSyArgs'
+import { useLiquidityManagerArgs } from '@/lib/useLiquidityManagerArgs'
+import { liquidityManager } from '@/data/contracts'
+
+type TokenUniverse = {
+    native: `0x${string}`
+    wrapped: `0x${string}`
+    ib: `0x${string}`
+    sy: `0x${string}`
+    pt: `0x${string}`
+    yt: `0x${string}`
+    market: `0x${string}`
+}
+
+enum TradeRoutes {
+    INVALID = 'INVALID',
+    ETH_TO_SY = 'ETH_TO_SY',
+    SY_TO_ETH = 'SY_TO_ETH',
+    SY_TO_PT = 'SY_TO_PT',
+    PT_TO_SY = 'PT_TO_SY',
+    SY_TO_YT = 'SY_TO_YT',
+    YT_TO_SY = 'YT_TO_SY',
+    ETH_TO_YT = 'ETH_TO_YT',
+    YT_TO_ETH = 'YT_TO_ETH',
+    SY_TO_LPT = 'SY_TO_LPT',
+    PT_TO_LPT = 'PT_TO_LPT',
+}
+
+function getTradeRoute(
+    universe: TokenUniverse,
+    tokenIn: string,
+    tokenOut: string
+): TradeRoutes {
+    if (tokenIn === universe.native && tokenOut === universe.sy) {
+        return TradeRoutes.ETH_TO_SY
+    } else if (tokenIn === universe.sy && tokenOut === universe.native) {
+        return TradeRoutes.SY_TO_ETH
+    } else if (tokenIn === universe.sy && tokenOut === universe.pt) {
+        return TradeRoutes.SY_TO_PT
+    } else if (tokenIn === universe.pt && tokenOut === universe.sy) {
+        return TradeRoutes.PT_TO_SY
+    } else if (
+        tokenIn === universe.native &&
+        tokenOut &&
+        universe.yt &&
+        getAddress(tokenOut) === getAddress(universe.yt)
+    ) {
+        return TradeRoutes.ETH_TO_YT
+    } else if (
+        tokenOut &&
+        universe.yt &&
+        getAddress(tokenOut) === getAddress(universe.yt)
+    ) {
+        return TradeRoutes.SY_TO_YT
+    } else if (tokenIn === universe.yt) {
+        return TradeRoutes.YT_TO_SY
+    } else if (tokenIn == universe.pt && tokenOut == universe.market) {
+        return TradeRoutes.PT_TO_LPT
+    } else if (tokenIn == universe.sy && tokenOut == universe.market) {
+        return TradeRoutes.SY_TO_LPT
+    } else {
+        return TradeRoutes.INVALID
+    }
+}
+
+/**
+ * Wrapper for TransactionButton component to be used for Allocating.
+ */
+const AllocateAction: React.FC<{
+    marketRoute: `0x${string}`
+    amountIn: string
+    setAmountOut: (amount: string) => void
+    setTokenOutFetching: (status: FetchStatus) => void
+}> = ({ marketRoute, amountIn, setAmountOut, setTokenOutFetching }) => {
+    // Transaction related info.
+    const { address } = useAccount()
+    const { txHash, setTxHash, txReceipt } = useTransactionStatus({})
+
+    // Get the market data.
+    const { data: marketData } = useGraphQL(MarketInfoQueryDocument, {
+        id: marketRoute,
+    })
+    const market = marketData?.markets?.items?.[0]
+
+    // Get the token data using the query params.
+    const {
+        data: { sorted: sortedTokens },
+    } = useTokens({})
+    const { getTokenIn, getTokenOut } = useTradeRoute()
+    const tokenIn = getTokenIn()
+    const tokenOut = getTokenOut()
+    const tokenInMeta =
+        tokenIn &&
+        sortedTokens?.find((tkn) => getAddress(tkn.id) === getAddress(tokenIn))
+    const tokenOutMeta =
+        tokenOut &&
+        sortedTokens?.find((tkn) => getAddress(tkn.id) === getAddress(tokenOut))
+
+    // todo: make sure tokens in ponder match these universe ones.
+    const universe = {
+        native: ETH_ADDRESS as `0x${string}`,
+        wrapped: market?.wrappedNativeAssetId as `0x${string}`,
+        ib: market?.ibAssetId as `0x${string}`,
+        sy: market?.syId as `0x${string}`,
+        pt: market?.ptId as `0x${string}`,
+        yt: market?.ytId as `0x${string}`,
+        market: market?.id as `0x${string}`,
+    }
+
+    // --- Prepare the action --- //
+
+    const tradeRoute = getTradeRoute(
+        universe,
+        tokenIn as `0x${string}`,
+        tokenOut as `0x${string}`
+    )
+    console.log({ tradeRoute })
+
+    // Prepare the input amount.
+    const preparedIn =
+        !isNaN(parseFloat(amountIn)) && toWad(parseFloat(amountIn))
+
+    // Check the allowance for the desired tokenIn.
+    const { data: allowance, status: allowanceStatus } = useReadContract({
+        abi: erc20Abi,
+        functionName: 'allowance',
+        address: tokenIn as `0x${string}`,
+        args: [address as `0x${string}`, liquidityManager as `0x${string}`],
+    })
+
+    const approved =
+        (allowance && preparedIn && allowance >= preparedIn) ||
+        tokenIn === ETH_ADDRESS
+
+    const { data: storedIndex, failureReason: storedIndexFailure } =
+        useReadContract({
+            abi: parseAbi([
+                'function pyIndexStored() external view returns(uint256)',
+            ] as const),
+            address: universe.yt,
+            functionName: 'pyIndexStored',
+        })
+
+    const isZapSy = tradeRoute === TradeRoutes.SY_TO_LPT
+
+    const { amountOut, status, fetchStatus, payload } = useLiquidityManagerArgs(
+        {
+            marketId: universe.market,
+            liquidityManagerAddress: liquidityManager,
+            pyIndexStored: storedIndex as bigint,
+            reserveX: market?.pool?.reserveX as bigint,
+            reserveY: market?.pool?.reserveY as bigint,
+            isZapSy,
+            amountIn,
+            enabled: approved,
+        }
+    )
+
+    console.log({ payload })
+    const estimatedAmountOut = amountOut
+
+    useEffect(() => {
+        setTokenOutFetching(fetchStatus)
+    }, [fetchStatus, setTokenOutFetching])
+
+    useEffect(() => {
+        if (estimatedAmountOut) {
+            setAmountOut(fromWad(estimatedAmountOut).toString())
+        }
+
+        if (!amountIn) {
+            setAmountOut('')
+        }
+    }, [amountIn, estimatedAmountOut, setAmountOut])
+
+    let action = null
+    if (tokenIn === null || tokenOut === null || !preparedIn) {
+        action = <TransactionButton disabled {...payload} />
+    } else if (!approved) {
+        action = (
+            <ApproveAction
+                token={tokenIn as `0x${string}`}
+                spender={liquidityManager}
+                amount={amountIn}
+                txHash={txHash}
+                setTxHash={setTxHash}
+                txReceipt={txReceipt}
+            />
+        )
+    } else {
+        switch (tradeRoute) {
+            case TradeRoutes.SY_TO_LPT:
+                action = <TransactionButton {...payload} />
+                break
+            case TradeRoutes.PT_TO_LPT:
+                action = <TransactionButton {...payload} />
+                break
+            default:
+                action = <TransactionButton disabled {...payload} />
+                break
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-0">
+            <div className="flex flex-row gap-sm border-b bg-muted/50 p-md">
+                <h4>Submit</h4>
+            </div>
+            <div className="flex flex-col gap-xl bg-blue/25 p-md">
+                <div className="flex flex-col gap-xs">
+                    <p>Review Transaction</p>
+                    {status === 'error' ? (
+                        <p className="truncate">Error during preparing.</p>
+                    ) : amountIn ? (
+                        <div className="flex flex-wrap gap-xs">
+                            {!approved ? (
+                                <>
+                                    <p className="text-muted dark:text-muted-foreground">
+                                        Approving{' '}
+                                    </p>
+                                    <p className="text-primary">
+                                        {formatNumber(parseFloat(amountIn))}{' '}
+                                    </p>
+                                    <p className="text-muted dark:text-muted-foreground">
+                                        {tokenInMeta?.symbol}.
+                                    </p>
+                                </>
+                            ) : (
+                                <>
+                                    {' '}
+                                    <p className="text-muted dark:text-muted-foreground">
+                                        Allocating{' '}
+                                    </p>
+                                    <p className="text-primary">
+                                        {formatNumber(parseFloat(amountIn))}{' '}
+                                    </p>
+                                    <p className="text-muted dark:text-muted-foreground">
+                                        {tokenInMeta?.symbol} for{' '}
+                                    </p>
+                                    {fetchStatus === 'fetching' ||
+                                    !estimatedAmountOut ? (
+                                        <Skeleton className={`w-auto h-auto`}>
+                                            <p className="text-transparent dark:text-transparent selection:text-transparent">
+                                                100.00
+                                            </p>
+                                        </Skeleton>
+                                    ) : (
+                                        <p className="text-primary">
+                                            {formatNumber(
+                                                fromWad(estimatedAmountOut)
+                                            )}
+                                        </p>
+                                    )}{' '}
+                                    <p className="text-muted dark:text-muted-foreground">
+                                        {tokenOutMeta?.symbol}.
+                                    </p>
+                                </>
+                            )}
+                        </div>
+                    ) : (
+                        <p className="text-muted dark:text-muted-foreground">
+                            Select token to zap add liquidity.
+                        </p>
+                    )}
+                </div>
+
+                {action}
+            </div>
+        </div>
+    )
+}
+
+export default AllocateAction
diff --git a/src/components/AccountHoldings/index.tsx b/src/components/AccountHoldings/index.tsx
index 48d97f2..4467fb1 100644
--- a/src/components/AccountHoldings/index.tsx
+++ b/src/components/AccountHoldings/index.tsx
@@ -114,7 +114,7 @@ const AccountInfo = (): JSX.Element => {
             <div className="flex flex-row gap-sm border-b bg-muted/50 p-md">
                 <h4>Portfolio</h4>
             </div>
-            <div className="flex flex-row gap-md items-center justify-between py-lg px-md">
+            <div className="flex flex-row gap-md items-center py-lg px-md w-1/3">
                 {address ? (
                     <>
                         {address && (!isConnecting || !isReconnecting) ? (
@@ -239,7 +239,7 @@ export const TokenBalance = ({
     )
 }
 
-const Holdings = (): JSX.Element => {
+const Holdings = ({ columns = 3 }: { columns: number }): JSX.Element => {
     const { address, isConnecting, isReconnecting } = useAccount()
     const {
         data: { sorted: sortedTokens },
@@ -313,7 +313,9 @@ const Holdings = (): JSX.Element => {
                 </Button>
             </div>
 
-            <div className="grid grid-cols-3 gap-sm items-center py-lg px-md">
+            <div
+                className={`grid grid-flow-col gap-sm items-center py-lg px-md`}
+            >
                 {!ethBalance ? (
                     new Array(1)
                         .fill(null)
@@ -367,7 +369,7 @@ const AccountHoldings: React.FC = (): JSX.Element => {
         <div className="flex flex-col gap-0 border">
             <TooltipProvider delayDuration={100}>
                 <AccountInfo />
-                <Holdings />
+                <Holdings columns={4} />
             </TooltipProvider>
         </div>
     )
diff --git a/src/components/AddLiquidityView/index.tsx b/src/components/AddLiquidityView/index.tsx
new file mode 100644
index 0000000..d1e3c42
--- /dev/null
+++ b/src/components/AddLiquidityView/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { useAccount } from 'wagmi'
+
+import { useMarketRoute } from '@/lib/useMarketRoute'
+
+import AllocateAction from '@/actions/AllocateAction'
+import {
+    ConnectToTrade,
+    Summary,
+    SwapWidget,
+    useTokenFormState,
+} from '../TradeView'
+
+const AddLiquidityView = (): JSX.Element => {
+    const { isConnected } = useAccount()
+
+    const { id } = useMarketRoute()
+    const tokenInForm = useTokenFormState()
+    const tokenOutForm = useTokenFormState('', true)
+
+    const [isSwapView, setIsSwapView] = React.useState(false)
+
+    return (
+        <div className="flex flex-col gap-0 border flex-grow">
+            <SwapWidget
+                tokenInForm={tokenInForm}
+                tokenOutForm={tokenOutForm}
+                isSwapView={isSwapView}
+                setIsSwapView={setIsSwapView}
+            />
+            {isConnected ? (
+                <>
+                    <Summary marketRoute={id} />
+                    <AllocateAction
+                        marketRoute={id}
+                        amountIn={tokenInForm.amount}
+                        setAmountOut={tokenOutForm.setAmount}
+                        setTokenOutFetching={tokenOutForm.setFetchStatus}
+                    />
+                </>
+            ) : (
+                <ConnectToTrade />
+            )}
+        </div>
+    )
+}
+
+export default AddLiquidityView
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 6976ecd..5ccec1d 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -8,13 +8,13 @@ import TradeView from '../TradeView'
 const Layout: React.FC<{ children: React.ReactElement }> = ({ children }) => {
     return (
         <main className="flex pt-8 pb-12 px-8 min-h-screen">
-            <div className="w-1/4 sticky top-16 h-full z-10">
+            {/* <div className="w-1/4 sticky top-16 h-full z-10">
                 <AccountHoldings />
-            </div>
+            </div> */}
             <Container>{children}</Container>
-            <div className="w-1/4 sticky top-16 h-full z-10">
+            {/* <div className="w-1/4 sticky top-16 h-full z-10">
                 <TradeView />
-            </div>
+            </div> */}
         </main>
     )
 }
diff --git a/src/components/MarketView/index.tsx b/src/components/MarketView/index.tsx
index 76eec5d..91433b0 100644
--- a/src/components/MarketView/index.tsx
+++ b/src/components/MarketView/index.tsx
@@ -89,7 +89,30 @@ const MarketView = (): JSX.Element => {
     const syBalance = balances?.[syBalanceIndex]?.result as bigint
 
     return (
-        <div className="flex flex-col gap-2xl">
+        <div className="flex flex-col gap-xl">
+            <div className="flex flex-col gap-lg">
+                <div className="grid grid-cols-3 gap-lg">
+                    <MarketStatCard
+                        label="Volume"
+                        data={formatNumber(
+                            market?.pool?.aggregateVolumeInUnderlying,
+                            'USD'
+                        )}
+                    />
+                    <MarketStatCard
+                        label="Liquidity"
+                        data={formatNumber(
+                            market?.pool?.liquidityInUnderlying,
+                            'USD'
+                        )}
+                    />
+                    <MarketStatCard
+                        label="Underlying Asset Price"
+                        data={formatNumber(market?.underlyingToUsd, 'USD')}
+                    />
+                </div>
+            </div>
+
             <div className="border flex flex-col gap-0">
                 <div className="flex flex-row items-center w-full justify-between border-b bg-muted/50 p-md">
                     <div className="flex flex-row items-center gap-sm w-1/2">
@@ -120,6 +143,7 @@ const MarketView = (): JSX.Element => {
                         </Tooltip>
                     </div>
                 </div>
+
                 <div className="flex h-96 w-full items-center justify-center text-center">
                     <TradeChart
                         marketId={
@@ -131,164 +155,22 @@ const MarketView = (): JSX.Element => {
                     />
                 </div>
             </div>
-
-            <div className="flex flex-row items-start gap-lg ">
-                <div className="flex flex-col gap-0 border w-full">
-                    <div className="flex flex-row  w-full justify-between border-b bg-muted/50 p-md">
-                        <h4 className="text-muted dark:text-muted-foreground">
-                            Market
-                        </h4>
-                        <h4>{market?.name ?? <SkeletonText />}</h4>
-                    </div>
-                    <div className="flex flex-row gap-2xl p-md w-full">
-                        <div className="flex flex-row gap-lg items-center w-full">
-                            <AvatarSkeletonTooltip
-                                src={market?.icon ?? FALLBACK_AVATAR}
-                                alt={market?.name ?? FALLBACK_ALT}
-                                loading={typeof market === 'undefined'}
-                                size={MARKET_AVATAR_SIZE}
-                            >
-                                {market?.name ?? <SkeletonText />}
-                            </AvatarSkeletonTooltip>
-                            <div className="flex flex-col gap-xs justify-center size-full">
-                                <h4 className="text-muted dark:text-muted-foreground">
-                                    Description
-                                </h4>
-
-                                {market?.name ? (
-                                    <p className="w-4xl flex-1">
-                                        This market tokenizes the individual
-                                        yield and principal components of the
-                                        yield-bearing asset <b>stETH</b>. Once
-                                        expiry is reached, the yield tokens do
-                                        not accrue more yield.
-                                    </p>
-                                ) : (
-                                    <SkeletonText />
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="flex flex-col gap-0 border w-full">
-                    <div className="flex flex-row  w-full justify-between border-b bg-muted/50 p-md">
-                        <div className="flex flex-row items-center gap-sm w-1/2">
-                            <h4 className="text-muted dark:text-muted-foreground">
-                                Actions
-                            </h4>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <InfoCircledIcon />
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    Convert the base asset (e.g. ETH, stETH)
-                                    into the composite token, Standardized
-                                    Yield, then trade it for either of the
-                                    component tokens, Yield or Principal.
-                                </TooltipContent>
-                            </Tooltip>
-                        </div>
-                    </div>
-                    <div className="flex flex-row gap-2xl p-md">
-                        <div className="flex flex-row gap-md items-start">
-                            <Button
-                                size="lg"
-                                variant="tx"
-                                onClick={() =>
-                                    setTokenParams(ETH_ADDRESS, market?.syId)
-                                }
-                            >
-                                Mint SY for trading
-                            </Button>
-                            <Button
-                                size="lg"
-                                variant="tx"
-                                onClick={() =>
-                                    setTokenParams(market?.syId, market?.ytId)
-                                }
-                                disabled={syBalance === 0n}
-                            >
-                                Long Yield
-                            </Button>
-
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        size="lg"
-                                        variant="info"
-                                        onClick={() =>
-                                            setTokenParams(
-                                                market?.syId,
-                                                market?.ptId
-                                            )
-                                        }
-                                        disabled={syBalance === 0n || true}
-                                    >
-                                        Short Yield
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent>Coming soon</TooltipContent>
-                            </Tooltip>
-
-                            {address &&
-                                (balances?.[0]?.result as bigint) > 0 && (
-                                    <Button
-                                        size="lg"
-                                        variant="destructive"
-                                        onClick={() =>
-                                            setTokenParams(
-                                                market?.pool?.tokenX?.id,
-                                                market?.pool?.tokenY?.id
-                                            )
-                                        }
-                                    >
-                                        Close position
-                                    </Button>
-                                )}
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div className="flex flex-col gap-lg">
-                <div className="grid grid-cols-3 gap-lg">
-                    <MarketStatCard
-                        label="Volume"
-                        data={formatNumber(
-                            market?.pool?.aggregateVolumeInUnderlying,
-                            'USD'
-                        )}
-                    />
-                    <MarketStatCard
-                        label="Liquidity"
-                        data={formatNumber(
-                            market?.pool?.liquidityInUnderlying,
-                            'USD'
-                        )}
-                    />
+            <div className="grid grid-cols-3 gap-lg">
+                {address && (
                     <MarketStatCard
-                        label="Underlying Asset Price"
-                        data={formatNumber(market?.underlyingToUsd, 'USD')}
+                        label="Your Liquidity Position"
+                        data={
+                            <div className="flex flex-row gap-md items-start justify-start">
+                                <TokenBalance
+                                    token={id}
+                                    balance={balances?.[0]}
+                                    disableTicker
+                                    ticker={'LP'}
+                                />
+                            </div>
+                        }
                     />
-                </div>
-                <div className="grid grid-cols-3 gap-lg">
-                    {address && (
-                        <MarketStatCard
-                            label="Your Liquidity Position"
-                            data={
-                                <div className="flex flex-row gap-md items-start justify-start">
-                                    <TokenBalance
-                                        token={id}
-                                        balance={balances?.[0]}
-                                        disableTicker
-                                        ticker={'LP'}
-                                    />
-                                </div>
-                            }
-                        />
-                    )}
-                </div>
+                )}
             </div>
         </div>
     )
diff --git a/src/components/Root/index.tsx b/src/components/Root/index.tsx
index 29fa20b..fe73241 100644
--- a/src/components/Root/index.tsx
+++ b/src/components/Root/index.tsx
@@ -124,17 +124,7 @@ function Root(): JSX.Element {
                     <Container>
                         <ul className="flex flex-row gap-xs items-center px-xl">
                             <li
-                                className={`${loc.pathname === '/' || loc.pathname.startsWith('/pool/') ? 'underline' : 'no-underline'}`}
-                            >
-                                <Button variant="link" asChild>
-                                    <Link to="/" className="pl-0">
-                                        Pools
-                                    </Link>
-                                </Button>
-                            </li>
-
-                            <li
-                                className={`${loc.pathname.startsWith('/yield') ? 'underline' : 'no-underline'}`}
+                                className={`${loc.pathname === '/' || loc.pathname.startsWith('/yield') ? 'underline' : 'no-underline'}`}
                             >
                                 <Button variant="link" asChild>
                                     <Link
@@ -147,6 +137,36 @@ function Root(): JSX.Element {
                                     </Link>
                                 </Button>
                             </li>
+
+                            <li
+                                className={`${loc.pathname.startsWith('/allocate') ? 'underline' : 'no-underline'}`}
+                            >
+                                <Button variant="link" asChild>
+                                    <Link to="/allocate" className="pl-0">
+                                        Allocate
+                                    </Link>
+                                </Button>
+                            </li>
+
+                            <li
+                                className={`${loc.pathname.startsWith('/market/') ? 'underline' : 'no-underline'}`}
+                            >
+                                <Button variant="link" asChild>
+                                    <Link to="/market" className="pl-0">
+                                        Markets
+                                    </Link>
+                                </Button>
+                            </li>
+
+                            <li
+                                className={`${loc.pathname.startsWith('/portfolio') ? 'underline' : 'no-underline'}`}
+                            >
+                                <Button variant="link" asChild>
+                                    <Link to="/portfolio" className="pl-0">
+                                        Portfolio
+                                    </Link>
+                                </Button>
+                            </li>
                         </ul>
                     </Container>
                     <div className="w-1/4 flex-row flex gap-4 items-center justify-end">
diff --git a/src/components/TradeView/index.tsx b/src/components/TradeView/index.tsx
index 3965466..8f41f27 100644
--- a/src/components/TradeView/index.tsx
+++ b/src/components/TradeView/index.tsx
@@ -2,12 +2,9 @@ import React, { useEffect } from 'react'
 import { useAccount } from 'wagmi'
 import { ArrowRightIcon, CheckIcon } from '@radix-ui/react-icons'
 import { getAddress } from 'viem'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { FetchStatus } from '@tanstack/react-query'
 
-import { useGraphQL } from '../../useGraphQL'
-import { MarketInfoQueryDocument } from '../../queries/markets'
-
 import { EtherscanLink, LabelWithEtherscan } from '../EtherscanLinkLabels'
 import TokenSelector from '../TokenSelector'
 import { useTokens } from '@/lib/useTokens'
@@ -16,7 +13,7 @@ import SwapAction from '@/actions/SwapAction'
 import { useMarketRoute } from '@/lib/useMarketRoute'
 import useSlippagePreference from '@/lib/useSlippagePreference'
 import { useOutputAmount } from '@/lib/useOutputAmount'
-import { FALLBACK_MARKET_ADDRESS, shortAddress } from '@/utils/address'
+
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 import { Input } from '../ui/input'
@@ -89,10 +86,17 @@ const TokenInput: React.FC<TokenInputProps> = ({
 /**
  * Fairly dumb component for selecting tokens and inputting values.
  */
-const SwapWidget: React.FC<{
+export const SwapWidget: React.FC<{
     tokenInForm: TokenForm
     tokenOutForm: TokenForm
-}> = ({ tokenInForm, tokenOutForm }): JSX.Element => {
+    isSwapView: boolean
+    setIsSwapView: (isSwapView: boolean) => void
+}> = ({
+    tokenInForm,
+    tokenOutForm,
+    isSwapView,
+    setIsSwapView,
+}): JSX.Element => {
     const loc = useLocation()
     const { getTokenIn, getTokenOut, setTokenParams } = useTradeRoute()
     const tokenIn = getTokenIn()
@@ -154,7 +158,9 @@ const SwapWidget: React.FC<{
     return (
         <div className="flex flex-col gap-0">
             <div className="flex flex-row gap-sm border-b bg-muted/50 p-md items-center justify-between">
-                <h4>Trade</h4>
+                <div className="flex flex-row gap-md items-center">
+                    <h4>{isSwapView ? 'Swap' : 'Allocate'}</h4>
+                </div>
 
                 <Button
                     onClick={() => {
@@ -204,7 +210,7 @@ const SwapWidget: React.FC<{
     )
 }
 
-const Summary = ({
+export const Summary = ({
     marketRoute,
 }: {
     marketRoute: `0x${string}`
@@ -310,14 +316,14 @@ export const ConnectToTrade = (): JSX.Element => {
     )
 }
 
-type TokenForm = {
+export type TokenForm = {
     amount: string
     setAmount: (amount: string) => void
     isFetching: boolean
     setFetchStatus: (isFetching: FetchStatus) => void
 }
 
-function useTokenFormState(
+export function useTokenFormState(
     initialAmount = '',
     syncOutputAmountQuery?: boolean
 ): TokenForm {
@@ -359,9 +365,16 @@ const TradeView = (): JSX.Element => {
     const tokenInForm = useTokenFormState()
     const tokenOutForm = useTokenFormState('', true)
 
+    const [isSwapView, setIsSwapView] = React.useState(true)
+
     return (
         <div className="flex flex-col gap-0 border flex-grow">
-            <SwapWidget tokenInForm={tokenInForm} tokenOutForm={tokenOutForm} />
+            <SwapWidget
+                tokenInForm={tokenInForm}
+                tokenOutForm={tokenOutForm}
+                isSwapView={isSwapView}
+                setIsSwapView={setIsSwapView}
+            />
             {isConnected ? (
                 <>
                     <Summary marketRoute={id} />
diff --git a/src/components/TransactionButton/index.tsx b/src/components/TransactionButton/index.tsx
index 2962770..063b854 100644
--- a/src/components/TransactionButton/index.tsx
+++ b/src/components/TransactionButton/index.tsx
@@ -8,6 +8,7 @@ import { Button, ButtonProps } from '../ui/button'
 import { dfmmABI } from '@/lib/abis/dfmm'
 import { rmmABI } from '@/lib/abis/rmm'
 import { SYABI } from '@/lib/abis/sy'
+import { liquidityManagerABI } from '@/lib/abis/liquidityManager'
 
 const functionNameToAction: { [fnName: string]: string } = {
     ['swapExactSyForYt']: 'Buy Yield',
@@ -18,7 +19,7 @@ const functionNameToAction: { [fnName: string]: string } = {
 export interface TransactionButtonProps extends ButtonProps {
     from?: Address
     to: Address
-    contractName?: 'dfmm' | 'erc20' | 'rmm' | 'SY'
+    contractName?: 'dfmm' | 'erc20' | 'rmm' | 'SY' | 'liquidityManager'
     functionName: string
     args: any[]
     txHash?: `0x${string}`
@@ -100,6 +101,7 @@ function transactionReducer(
     state: TransactionState,
     action: TransactionAction
 ): TransactionState {
+    console.log('Changing to state: ', action.type)
     switch (action.type) {
         case 'TRANSACTION_READY':
             return TransactionState.TransactionReady
@@ -157,14 +159,16 @@ function TransactionButton(props: TransactionButtonProps): JSX.Element {
                 ? dfmmABI
                 : props.contractName === 'erc20'
                   ? erc20Abi
-                  : ({} as Abi)
+                  : props.contractName === 'liquidityManager'
+                    ? liquidityManagerABI
+                    : ({} as Abi)
 
     const simulation = useSimulateContract({
         abi,
         address: props.to,
         functionName: props.functionName,
         args: props.args,
-        value: props.value,
+        value: props.value ?? 0n,
         stateOverride: props.stateOverride,
         query: {
             enabled:
@@ -227,6 +231,7 @@ function TransactionButton(props: TransactionButtonProps): JSX.Element {
 
         if (simulation?.error) {
             dispatch({ type: 'SIMULATE_ERROR' })
+            console.log('Simulate failed with error: ')
             console.error(simulation.failureReason)
             return
         }
diff --git a/src/data/contracts.ts b/src/data/contracts.ts
index 32656d9..e391664 100644
--- a/src/data/contracts.ts
+++ b/src/data/contracts.ts
@@ -1,9 +1 @@
-export const G3mSolver = '0x05792cA1459699A3DA6e6E7Af295E3C792D5e038'
-export const nG3mSolver = '0xF00E9B380140E47B6fe0Ece62a50af75aD4FD984'
-export const lnSolver = ''
-export const csSolver = '0xf24FF07f7556BC4B9A91f88AFe8Ea7Cb5efb71CA'
-
-export const lnStrategy = ''
-export const nG3mStrategy = '0x8Cc5377b8384F210170901c5EAb6C8a257f02316'
-export const csStrategy = '0x1623841962bCB856C44Ac55Ef1D1C3c3354F56Ac'
-export const dfmmAddress = '0x2aD77BEb56d7b1875B7bbB4cC29A7061afeF613b'
+export const liquidityManager = '0x5Cf5D175bC74319d4AF42f3026aF6446901559a7'
diff --git a/src/lib/abis/liquidityManager.ts b/src/lib/abis/liquidityManager.ts
new file mode 100644
index 0000000..a6db870
--- /dev/null
+++ b/src/lib/abis/liquidityManager.ts
@@ -0,0 +1,200 @@
+export const liquidityManagerABI = [
+    {
+        type: 'function',
+        name: 'allocateFromPt',
+        inputs: [
+            {
+                name: 'args',
+                type: 'tuple',
+                internalType: 'struct LiquidityManager.AllocateArgs',
+                components: [
+                    { name: 'rmm', type: 'address', internalType: 'address' },
+                    {
+                        name: 'amountIn',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'minOut',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'minLiquidityDelta',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'initialGuess',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'epsilon',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                ],
+            },
+        ],
+        outputs: [
+            { name: 'liquidity', type: 'uint256', internalType: 'uint256' },
+        ],
+        stateMutability: 'nonpayable',
+    },
+    {
+        type: 'function',
+        name: 'allocateFromSy',
+        inputs: [
+            {
+                name: 'args',
+                type: 'tuple',
+                internalType: 'struct LiquidityManager.AllocateArgs',
+                components: [
+                    { name: 'rmm', type: 'address', internalType: 'address' },
+                    {
+                        name: 'amountIn',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'minOut',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'minLiquidityDelta',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'initialGuess',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'epsilon',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                ],
+            },
+        ],
+        outputs: [
+            { name: 'liquidity', type: 'uint256', internalType: 'uint256' },
+        ],
+        stateMutability: 'nonpayable',
+    },
+    {
+        type: 'function',
+        name: 'computePtToSyToAddLiquidity',
+        inputs: [
+            {
+                name: 'args',
+                type: 'tuple',
+                internalType: 'struct LiquidityManager.ComputeArgs',
+                components: [
+                    { name: 'rmm', type: 'address', internalType: 'address' },
+                    { name: 'rX', type: 'uint256', internalType: 'uint256' },
+                    { name: 'rY', type: 'uint256', internalType: 'uint256' },
+                    { name: 'index', type: 'uint256', internalType: 'PYIndex' },
+                    { name: 'maxIn', type: 'uint256', internalType: 'uint256' },
+                    {
+                        name: 'blockTime',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'initialGuess',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'epsilon',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                ],
+            },
+        ],
+        outputs: [
+            { name: 'guess', type: 'uint256', internalType: 'uint256' },
+            { name: 'syOut', type: 'uint256', internalType: 'uint256' },
+        ],
+        stateMutability: 'view',
+    },
+    {
+        type: 'function',
+        name: 'computeSyToPtToAddLiquidity',
+        inputs: [
+            {
+                name: 'args',
+                type: 'tuple',
+                internalType: 'struct LiquidityManager.ComputeArgs',
+                components: [
+                    { name: 'rmm', type: 'address', internalType: 'address' },
+                    { name: 'rX', type: 'uint256', internalType: 'uint256' },
+                    { name: 'rY', type: 'uint256', internalType: 'uint256' },
+                    { name: 'index', type: 'uint256', internalType: 'PYIndex' },
+                    { name: 'maxIn', type: 'uint256', internalType: 'uint256' },
+                    {
+                        name: 'blockTime',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'initialGuess',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                    {
+                        name: 'epsilon',
+                        type: 'uint256',
+                        internalType: 'uint256',
+                    },
+                ],
+            },
+        ],
+        outputs: [
+            { name: 'guess', type: 'uint256', internalType: 'uint256' },
+            { name: 'ptOut', type: 'uint256', internalType: 'uint256' },
+        ],
+        stateMutability: 'view',
+    },
+    {
+        type: 'function',
+        name: 'mintSY',
+        inputs: [
+            { name: 'SY', type: 'address', internalType: 'address' },
+            { name: 'receiver', type: 'address', internalType: 'address' },
+            { name: 'tokenIn', type: 'address', internalType: 'address' },
+            {
+                name: 'amountTokenToDeposit',
+                type: 'uint256',
+                internalType: 'uint256',
+            },
+            { name: 'minSharesOut', type: 'uint256', internalType: 'uint256' },
+        ],
+        outputs: [
+            { name: 'amountOut', type: 'uint256', internalType: 'uint256' },
+        ],
+        stateMutability: 'payable',
+    },
+    {
+        type: 'error',
+        name: 'InsufficientSYMinted',
+        inputs: [
+            { name: 'amountMinted', type: 'uint256', internalType: 'uint256' },
+            {
+                name: 'minAmountMinted',
+                type: 'uint256',
+                internalType: 'uint256',
+            },
+        ],
+    },
+    {
+        type: 'error',
+        name: 'InvalidTokenIn',
+        inputs: [{ name: 'tokenIn', type: 'address', internalType: 'address' }],
+    },
+]
diff --git a/src/lib/abis/rmm.ts b/src/lib/abis/rmm.ts
index 0a15b7b..a6f175c 100644
--- a/src/lib/abis/rmm.ts
+++ b/src/lib/abis/rmm.ts
@@ -159,21 +159,25 @@ export const rmmABI = [
         inputs: [
             { name: 'index', type: 'uint256', internalType: 'PYIndex' },
             { name: 'exactSYIn', type: 'uint256', internalType: 'uint256' },
+            { name: 'max', type: 'uint256', internalType: 'uint256' },
             { name: 'blockTime', type: 'uint256', internalType: 'uint256' },
             { name: 'initialGuess', type: 'uint256', internalType: 'uint256' },
+            { name: 'epsilon', type: 'uint256', internalType: 'uint256' },
         ],
-        outputs: [{ name: '', type: 'uint256', internalType: 'uint256' }],
+        outputs: [{ name: 'guess', type: 'uint256', internalType: 'uint256' }],
         stateMutability: 'view',
     },
     {
         type: 'function',
-        name: 'computeTokenToYt',
+        name: 'computeTokenToYT',
         inputs: [
             { name: 'index', type: 'uint256', internalType: 'PYIndex' },
             { name: 'token', type: 'address', internalType: 'address' },
             { name: 'exactTokenIn', type: 'uint256', internalType: 'uint256' },
+            { name: 'max', type: 'uint256', internalType: 'uint256' },
             { name: 'blockTime', type: 'uint256', internalType: 'uint256' },
             { name: 'initialGuess', type: 'uint256', internalType: 'uint256' },
+            { name: 'epsilon', type: 'uint256', internalType: 'uint256' },
         ],
         outputs: [
             {
@@ -542,8 +546,15 @@ export const rmmABI = [
         type: 'function',
         name: 'swapExactSyForYt',
         inputs: [
-            { name: 'amountIn', type: 'uint256', internalType: 'uint256' },
+            { name: 'maxSyIn', type: 'uint256', internalType: 'uint256' },
+            {
+                name: 'amountPtToFlash',
+                type: 'uint256',
+                internalType: 'uint256',
+            },
             { name: 'minAmountOut', type: 'uint256', internalType: 'uint256' },
+            { name: 'upperBound', type: 'uint256', internalType: 'uint256' },
+            { name: 'epsilon', type: 'uint256', internalType: 'uint256' },
             { name: 'to', type: 'address', internalType: 'address' },
         ],
         outputs: [
@@ -565,6 +576,8 @@ export const rmmABI = [
             },
             { name: 'minSyMinted', type: 'uint256', internalType: 'uint256' },
             { name: 'minYtOut', type: 'uint256', internalType: 'uint256' },
+            { name: 'upperBound', type: 'uint256', internalType: 'uint256' },
+            { name: 'epsilon', type: 'uint256', internalType: 'uint256' },
             { name: 'to', type: 'address', internalType: 'address' },
         ],
         outputs: [
@@ -637,13 +650,6 @@ export const rmmABI = [
         outputs: [{ name: '', type: 'bool', internalType: 'bool' }],
         stateMutability: 'nonpayable',
     },
-    {
-        type: 'function',
-        name: 'version',
-        inputs: [],
-        outputs: [{ name: '', type: 'string', internalType: 'string' }],
-        stateMutability: 'pure',
-    },
     {
         type: 'event',
         name: 'Allocate',
diff --git a/src/lib/useLiquidityManagerArgs.ts b/src/lib/useLiquidityManagerArgs.ts
new file mode 100644
index 0000000..824ba63
--- /dev/null
+++ b/src/lib/useLiquidityManagerArgs.ts
@@ -0,0 +1,156 @@
+import { useEffect } from 'react'
+import { useAccount, useReadContract } from 'wagmi'
+import { getAddress } from 'viem'
+
+import { liquidityManagerABI } from './abis/liquidityManager'
+import { useTransactionStatus } from '@/components/TransactionButton/useTransactionStatus'
+import { toWad } from '@/utils/numbers'
+
+import useSlippagePreference from './useSlippagePreference'
+import { ArgsHookReturn } from './useSwapArgs'
+import { timestamp } from '@/utils/dates'
+import { rmmABI } from './abis/rmm'
+
+export function useLiquidityManagerArgs({
+    marketId,
+    liquidityManagerAddress,
+    pyIndexStored,
+    reserveX,
+    reserveY,
+    isZapSy,
+    amountIn,
+    enabled,
+}: {
+    marketId: string
+    liquidityManagerAddress: string
+    pyIndexStored: bigint
+    reserveX: bigint
+    reserveY: bigint
+    isZapSy: boolean
+    amountIn: string
+    enabled: boolean
+}): ArgsHookReturn {
+    const { address } = useAccount()
+    const { setTxHash, txHash, txReceipt } = useTransactionStatus({})
+    const [slippage] = useSlippagePreference()
+
+    const inputAmount = !isNaN(parseFloat(amountIn))
+        ? toWad(parseFloat(amountIn))
+        : 0n
+
+    let RMM = undefined
+    try {
+        RMM = getAddress(marketId)
+    } catch (e) {}
+
+    const prepareFunctionName = isZapSy
+        ? 'computeSyToPtToAddLiquidity'
+        : 'computePtToSyToAddLiquidity'
+    const functionName = isZapSy ? 'allocateFromSy' : 'allocateFromPt'
+
+    const { data, status, error, failureReason, fetchStatus } = useReadContract(
+        {
+            abi: liquidityManagerABI,
+            address: liquidityManagerAddress as `0x${string}`,
+            account: address as `0x${string}`,
+            functionName: prepareFunctionName,
+            args: [
+                {
+                    rmm: RMM,
+                    rX: reserveX,
+                    rY: reserveY,
+                    index: pyIndexStored,
+                    maxIn: inputAmount,
+                    blockTime: timestamp(),
+                    initialGuess: 0n,
+                    epsilon: 10_000n,
+                },
+            ],
+            query: {
+                enabled: enabled && !!RMM && !!liquidityManagerAddress,
+            },
+        }
+    )
+
+    console.log({ data, failureReason })
+
+    const swapInput = (data?.[0] as bigint) ?? 0n
+    const swapOutput = (data?.[1] as bigint) ?? 0n - 1000n
+
+    const {
+        data: prepareAllocateData,
+        status: prepareAllocateStatus,
+        error: prepareAllocateError,
+        failureReason: prepareAllocateFailureReason,
+    } = useReadContract({
+        abi: rmmABI,
+        address: RMM as `0x${string}`,
+        account: address as `0x${string}`,
+        functionName: 'prepareAllocate',
+        args: [inputAmount - swapInput, swapOutput, pyIndexStored],
+        query: {
+            enabled: enabled && !!RMM && !!data,
+        },
+    })
+
+    const minLiquidityDelta = (prepareAllocateData?.[2] as bigint) ?? 0n
+    const outputAmount = minLiquidityDelta
+    const minOutputAmount = outputAmount
+        ? (outputAmount * toWad(1 - slippage)) / toWad(1)
+        : 0n
+    const lptMinted = (prepareAllocateData?.[3] as bigint) ?? 0n
+
+    useEffect(() => {
+        if (error || failureReason) {
+            console.log('useLiquidityManagerArgs error: ', error, failureReason)
+        }
+
+        if (prepareAllocateError || prepareAllocateFailureReason) {
+            console.log(
+                'useLiquidityManagerArgs prepareAllocateError: ',
+                prepareAllocateError,
+                prepareAllocateFailureReason
+            )
+        }
+    }, [
+        error,
+        failureReason,
+        prepareAllocateError,
+        prepareAllocateFailureReason,
+    ])
+
+    console.log({
+        rmm: RMM,
+        amountIn: inputAmount,
+        minOut: swapOutput,
+        minLiquidtyDelta: minOutputAmount,
+        initialGuess: swapInput,
+        epsilon: toWad(5) / 1000n,
+    })
+
+    return {
+        amountOut: lptMinted,
+        status,
+        fetchStatus,
+        payload: {
+            from: address as `0x${string}`,
+            to: liquidityManagerAddress as `0x${string}`,
+            contractName: 'liquidityManager',
+            functionName,
+            args: [
+                {
+                    rmm: RMM,
+                    amountIn: inputAmount,
+                    minOut: swapOutput,
+                    minLiquidityDelta: minOutputAmount,
+                    initialGuess: swapInput,
+                    epsilon: toWad(5) / 1000n,
+                } as const,
+            ],
+            value: 0n,
+            txHash,
+            txReceipt,
+            setTxHash,
+        },
+    }
+}
diff --git a/src/lib/useTokens.ts b/src/lib/useTokens.ts
index b180889..0c77139 100644
--- a/src/lib/useTokens.ts
+++ b/src/lib/useTokens.ts
@@ -32,6 +32,17 @@ export function useTokens({ id }: { id?: string }): {
                 market?.marketTokens?.items.map((item) => item.token) ?? []
         )
 
+        // Add the markets themselves as tokens in the allTokens array
+        const marketsAsTokens = data.markets.items.map((market) => ({
+            id: market.id,
+            symbol: 'LP-' + market.name,
+            name: 'LP-' + market.name,
+            icon: market.icon,
+            decimals: 18,
+        }))
+
+        allTokens.push(...marketsAsTokens)
+
         // Filter out duplicates based on a combination of 'id' and 'symbol' for uniqueness
         const uniqueTokens = Array.from(
             new Map(
diff --git a/src/pages/allocate/index.tsx b/src/pages/allocate/index.tsx
new file mode 100644
index 0000000..84b660c
--- /dev/null
+++ b/src/pages/allocate/index.tsx
@@ -0,0 +1,171 @@
+import React from 'react'
+import { useAccount } from 'wagmi'
+
+import { allMarketsQueryDocument } from '../../queries/markets'
+import { useGraphQL } from '../../useGraphQL'
+import { ImplYieldQueryDocument } from '../../queries/prices'
+import { PositionQueryDocument } from '../../queries/positions'
+
+import YieldPositionsTable from '@/components/YieldPositionsTable'
+import InfoCard from '@/components/InfoCard'
+import InfoHeader from '@/components/InfoHeader'
+import SectionHeader from '@/components/SectionHeader'
+import { useTradeRoute } from '@/lib/useTradeRoute'
+import { ETH_ADDRESS } from '@/lib/useTokens'
+import { useOutputAmount } from '@/lib/useOutputAmount'
+import { daysUntilDate, fromExpiryToDate } from '@/utils/dates'
+import { FALLBACK_MARKET_ADDRESS } from '@/utils/address'
+import { formatPercentage } from '@/utils/numbers'
+import AddLiquidityView from '@/components/AddLiquidityView'
+
+const EmptyPositionTable: React.FC = () => {
+    return (
+        <div className="border flex flex-col gap-0 p-xl items-center justify-center h-48">
+            <h3 className="text-muted/35 dark:text-muted-foreground/35">
+                Connect to View Positions
+            </h3>
+        </div>
+    )
+}
+
+type AllocateCardProps = {
+    selectedMarket: string
+    setSelectedMarket: (marketId: string) => void
+    marketId: string
+    syTokenId: string
+    liquidityTokenId: string
+    expiry: number
+    avgEntryImpliedRate: number
+}
+
+const AllocateCard: React.FC<AllocateCardProps> = ({
+    selectedMarket,
+    setSelectedMarket,
+    marketId,
+    syTokenId,
+    liquidityTokenId,
+    expiry,
+    avgEntryImpliedRate,
+}) => {
+    const { setTokenParams } = useTradeRoute()
+
+    const bg = marketId.comp(selectedMarket)
+        ? 'bg-secondary border-foreground/50'
+        : ''
+
+    return (
+        <div
+            key={marketId}
+            className={`${bg} flex flex-col gap-sm border p-md items-center justify-center hover:cursor-pointer`}
+            onClick={() => {
+                setSelectedMarket(marketId)
+                setTokenParams(syTokenId, liquidityTokenId)
+            }}
+        >
+            <div className="flex flex-row gap-xs items-center">
+                <h4 className="font-500">{fromExpiryToDate(expiry)}</h4>
+                <p className="text-muted dark:text-muted-foreground">
+                    ({daysUntilDate(expiry)}d)
+                </p>
+            </div>
+
+            <div className="flex flex-row gap-xs items-center">
+                <h4 className="text-cyan">
+                    {formatPercentage(avgEntryImpliedRate)}
+                </h4>
+                <p className="text-muted dark:text-muted-foreground">
+                    Implied vAPR
+                </p>
+            </div>
+        </div>
+    )
+}
+
+const AllocatePage: React.FC = () => {
+    const { address } = useAccount()
+    const { getOutputAmount } = useOutputAmount()
+    const outputAmount = Number(getOutputAmount())
+    const [selectedMarket, setSelectedMarket] = React.useState<
+        string | undefined
+    >(undefined)
+
+    // market data
+    const { data, refetch, isFetching, isLoading } = useGraphQL(
+        allMarketsQueryDocument,
+        { limit: 10 }
+    )
+    // position data
+    const { data: positionData } = useGraphQL(PositionQueryDocument, {
+        marketId: selectedMarket as string,
+    })
+    // yield data
+    const { data: implied } = useGraphQL(ImplYieldQueryDocument, {
+        marketId: selectedMarket as string,
+    })
+
+    return (
+        <div className="flex flex-col gap-2xl p-xl pt-0 mx-auto">
+            <div className="flex flex-col gap-lg">
+                <InfoHeader title="Provide liquidity to fixed yield markets." />
+
+                <SectionHeader
+                    title={'Select Maturity'}
+                    quantity={data?.markets?.items?.length}
+                    refetch={refetch}
+                    isFetching={isFetching}
+                    isLoading={isLoading}
+                />
+
+                <div className="grid-cols-3 grid gap-md ">
+                    {data?.markets?.items?.map((market) => (
+                        <AllocateCard
+                            key={market.id}
+                            selectedMarket={selectedMarket}
+                            setSelectedMarket={setSelectedMarket}
+                            marketId={market.id}
+                            syTokenId={market.syId}
+                            liquidityTokenId={market.id}
+                            expiry={market.expiry}
+                            avgEntryImpliedRate={
+                                implied?.impliedYields?.items?.filter((item) =>
+                                    market.id.comp(item?.marketId)
+                                )?.[0]?.value
+                            }
+                        />
+                    ))}
+
+                    <InfoCard
+                        title="Adding liquidity has additional risks."
+                        content="Liquidity providers hold both tokens in the pool."
+                    />
+                </div>
+
+                {address ? (
+                    <div className="flex flex-row gap-md items-start justify-between">
+                        <div className="flex flex-col gap-0 items-center justify-center">
+                            <SectionHeader title={'My Position'} />
+                            <div className="flex flex-col gap-0 border border-t-0">
+                                <div className="grid grid-cols-1 gap-md">
+                                    {data && (
+                                        <YieldPositionsTable
+                                            data={positionData}
+                                            isFetching={isFetching}
+                                            delta={outputAmount}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="w-1/2 items-start justify-center">
+                            <AddLiquidityView />
+                        </div>
+                    </div>
+                ) : (
+                    <EmptyPositionTable />
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default AllocatePage
diff --git a/src/pages/portfolio/index.tsx b/src/pages/portfolio/index.tsx
new file mode 100644
index 0000000..f8125d2
--- /dev/null
+++ b/src/pages/portfolio/index.tsx
@@ -0,0 +1,11 @@
+import AccountHoldings from '@/components/AccountHoldings'
+
+const Portfolio: React.FC = () => {
+    return (
+        <div className="w-2/3 mx-auto">
+            <AccountHoldings />
+        </div>
+    )
+}
+
+export default Portfolio
diff --git a/src/pages/yield/index.tsx b/src/pages/yield/index.tsx
index db5bef0..2ea439e 100644
--- a/src/pages/yield/index.tsx
+++ b/src/pages/yield/index.tsx
@@ -16,6 +16,7 @@ import { useOutputAmount } from '@/lib/useOutputAmount'
 import { daysUntilDate, fromExpiryToDate } from '@/utils/dates'
 import { FALLBACK_MARKET_ADDRESS } from '@/utils/address'
 import { formatPercentage } from '@/utils/numbers'
+import TradeView from '@/components/TradeView'
 
 const EmptyPositionTable: React.FC = () => {
     return (
@@ -84,7 +85,7 @@ const YieldPage: React.FC = () => {
     const outputAmount = Number(getOutputAmount())
     const [selectedMarket, setSelectedMarket] = React.useState<
         string | undefined
-    >(FALLBACK_MARKET_ADDRESS)
+    >(undefined)
 
     // market data
     const { data, refetch, isFetching, isLoading } = useGraphQL(
@@ -136,20 +137,31 @@ const YieldPage: React.FC = () => {
                     />
                 </div>
 
+                {/* {address ? (
+                    <div className="w-1/2 items-center justify-center">
+                        <TradeView />
+                    </div>
+                ) : null} */}
+
                 {address ? (
-                    <div className="flex flex-col gap-0">
-                        <SectionHeader title={'My Position'} />
-                        <div className="flex flex-col gap-0 border border-t-0">
-                            <div className="grid grid-cols-1 gap-md">
-                                {data && (
-                                    <YieldPositionsTable
-                                        data={positionData}
-                                        isFetching={isFetching}
-                                        delta={outputAmount}
-                                    />
-                                )}
+                    <div className="flex flex-row gap-md items-start justify-between">
+                        <div className="flex flex-col gap-0 items-center justify-center">
+                            <SectionHeader title={'My Position'} />
+                            <div className="flex flex-col gap-0 border border-t-0">
+                                <div className="grid grid-cols-1 gap-md">
+                                    {data && (
+                                        <YieldPositionsTable
+                                            data={positionData}
+                                            isFetching={isFetching}
+                                            delta={outputAmount}
+                                        />
+                                    )}
+                                </div>
                             </div>
                         </div>
+                        <div className="w-1/2 items-start justify-center">
+                            <TradeView />
+                        </div>
                     </div>
                 ) : (
                     <EmptyPositionTable />
diff --git a/src/utils/address.ts b/src/utils/address.ts
index 98a7d5b..ca31584 100644
--- a/src/utils/address.ts
+++ b/src/utils/address.ts
@@ -5,7 +5,7 @@ export const FALLBACK_ALT = '@shadcn'
 
 // todo: this is a pool contract that we use as a fallback for computing swap routes.
 export const FALLBACK_MARKET_ADDRESS = getAddress(
-    '0x694bf4398f5e630e4e62b252da6eb4be334684bf'
+    '0x533A549acca30F1B8f56eB320d80DfB1AbaB1883'
 )
 
 export function shortAddress(address: `0x${string}`): string {