diff --git a/app/market/[chainId]/[marketid]/RateChart.tsx b/app/market/[chainId]/[marketid]/RateChart.tsx
index a2197587..88137715 100644
--- a/app/market/[chainId]/[marketid]/RateChart.tsx
+++ b/app/market/[chainId]/[marketid]/RateChart.tsx
@@ -39,18 +39,18 @@ function RateChart({
   const [visibleLines, setVisibleLines] = useState({
     supplyApy: true,
     borrowApy: true,
-    rateAtUTarget: true,
+    apyAtTarget: true,
   });
 
   const getChartData = () => {
     if (!historicalData) return [];
-    const { supplyApy, borrowApy, rateAtUTarget } = historicalData;
+    const { supplyApy, borrowApy, apyAtTarget } = historicalData;
 
     return supplyApy.map((point: TimeseriesDataPoint, index: number) => ({
       x: point.x,
       supplyApy: point.y,
       borrowApy: borrowApy[index]?.y || 0,
-      rateAtUTarget: rateAtUTarget[index]?.y || 0,
+      apyAtTarget: apyAtTarget[index]?.y || 0,
     }));
   };
 
@@ -70,17 +70,17 @@ function RateChart({
       : 0;
   };
 
-  const getCurrentRateAtUTargetValue = () => {
-    return market.state.rateAtUTarget;
+  const getCurrentapyAtTargetValue = () => {
+    return market.state.apyAtTarget;
   };
 
-  const getAverageRateAtUTargetValue = () => {
-    if (!historicalData?.rateAtUTarget || historicalData.rateAtUTarget.length === 0) return 0;
+  const getAverageapyAtTargetValue = () => {
+    if (!historicalData?.apyAtTarget || historicalData.apyAtTarget.length === 0) return 0;
     return (
-      historicalData.rateAtUTarget.reduce(
+      historicalData.apyAtTarget.reduce(
         (sum: number, point: TimeseriesDataPoint) => sum + point.y,
         0,
-      ) / historicalData.rateAtUTarget.length
+      ) / historicalData.apyAtTarget.length
     );
   };
 
@@ -162,13 +162,13 @@ function RateChart({
                     <linearGradient id="rateChart-targetGradient" x1="0" y1="0" x2="0" y2="1">
                       <stop
                         offset="0%"
-                        stopColor={CHART_COLORS.rateAtUTarget.gradient.start}
-                        stopOpacity={CHART_COLORS.rateAtUTarget.gradient.startOpacity}
+                        stopColor={CHART_COLORS.apyAtTarget.gradient.start}
+                        stopOpacity={CHART_COLORS.apyAtTarget.gradient.startOpacity}
                       />
                       <stop
                         offset="25%"
-                        stopColor={CHART_COLORS.rateAtUTarget.gradient.start}
-                        stopOpacity={CHART_COLORS.rateAtUTarget.gradient.endOpacity}
+                        stopColor={CHART_COLORS.apyAtTarget.gradient.start}
+                        stopOpacity={CHART_COLORS.apyAtTarget.gradient.endOpacity}
                       />
                     </linearGradient>
                   </defs>
@@ -224,13 +224,13 @@ function RateChart({
                   />
                   <Area
                     type="monotone"
-                    dataKey="rateAtUTarget"
+                    dataKey="apyAtTarget"
                     name="Rate at Util Target"
-                    stroke={CHART_COLORS.rateAtUTarget.stroke}
+                    stroke={CHART_COLORS.apyAtTarget.stroke}
                     strokeWidth={2}
                     fill="url(#rateChart-targetGradient)"
                     fillOpacity={1}
-                    hide={!visibleLines.rateAtUTarget}
+                    hide={!visibleLines.apyAtTarget}
                   />
                 </AreaChart>
               </ResponsiveContainer>
@@ -270,7 +270,7 @@ function RateChart({
                 <div className="flex items-center justify-between">
                   <span>Rate at U Target:</span>
                   <span className="font-monospace text-sm">
-                    {formatPercentage(getCurrentRateAtUTargetValue())}
+                    {formatPercentage(getCurrentapyAtTargetValue())}
                   </span>
                 </div>
               </div>
@@ -307,7 +307,7 @@ function RateChart({
                     <div className="flex items-center justify-between">
                       <span>Rate at U Target:</span>
                       <span className="font-monospace text-sm">
-                        {formatPercentage(getAverageRateAtUTargetValue())}
+                        {formatPercentage(getAverageapyAtTargetValue())}
                       </span>
                     </div>
                   </>
diff --git a/app/market/[chainId]/[marketid]/VolumeChart.tsx b/app/market/[chainId]/[marketid]/VolumeChart.tsx
index 7cd9d05f..802226c7 100644
--- a/app/market/[chainId]/[marketid]/VolumeChart.tsx
+++ b/app/market/[chainId]/[marketid]/VolumeChart.tsx
@@ -224,13 +224,13 @@ function VolumeChart({
                     <linearGradient id="volumeChart-liquidityGradient" x1="0" y1="0" x2="0" y2="1">
                       <stop
                         offset="0%"
-                        stopColor={CHART_COLORS.rateAtUTarget.gradient.start}
-                        stopOpacity={CHART_COLORS.rateAtUTarget.gradient.startOpacity}
+                        stopColor={CHART_COLORS.apyAtTarget.gradient.start}
+                        stopOpacity={CHART_COLORS.apyAtTarget.gradient.startOpacity}
                       />
                       <stop
                         offset="25%"
-                        stopColor={CHART_COLORS.rateAtUTarget.gradient.start}
-                        stopOpacity={CHART_COLORS.rateAtUTarget.gradient.endOpacity}
+                        stopColor={CHART_COLORS.apyAtTarget.gradient.start}
+                        stopOpacity={CHART_COLORS.apyAtTarget.gradient.endOpacity}
                       />
                     </linearGradient>
                   </defs>
@@ -288,7 +288,7 @@ function VolumeChart({
                     type="monotone"
                     dataKey="liquidity"
                     name="Liquidity"
-                    stroke={CHART_COLORS.rateAtUTarget.stroke}
+                    stroke={CHART_COLORS.apyAtTarget.stroke}
                     strokeWidth={2}
                     fill="url(#volumeChart-liquidityGradient)"
                     fillOpacity={1}
diff --git a/app/markets/components/MarketTableBody.tsx b/app/markets/components/MarketTableBody.tsx
index a954d659..0fbb805d 100644
--- a/app/markets/components/MarketTableBody.tsx
+++ b/app/markets/components/MarketTableBody.tsx
@@ -164,7 +164,7 @@ export function MarketTableBody({
               {columnVisibility.rateAtTarget && (
                 <td data-label="Target Rate" className="z-50 text-center" style={{ minWidth: '85px', paddingLeft: 3, paddingRight: 3 }}>
                   <p className="text-sm">
-                    {item.state.rateAtUTarget ? `${(item.state.rateAtUTarget * 100).toFixed(2)}%` : '—'}
+                    {item.state.apyAtTarget ? `${(item.state.apyAtTarget * 100).toFixed(2)}%` : '—'}
                   </p>
                 </td>
               )}
diff --git a/app/markets/components/markets.tsx b/app/markets/components/markets.tsx
index 1e63314d..c8728e53 100644
--- a/app/markets/components/markets.tsx
+++ b/app/markets/components/markets.tsx
@@ -271,7 +271,7 @@ export default function Markets({
         [SortColumn.SupplyAPY]: 'state.supplyApy',
         [SortColumn.Liquidity]: 'state.liquidityAssets',
         [SortColumn.BorrowAPY]: 'state.borrowApy',
-        [SortColumn.RateAtTarget]: 'state.rateAtUTarget',
+        [SortColumn.RateAtTarget]: 'state.apyAtTarget',
       };
       const propertyPath = sortPropertyMap[sortColumn];
       if (propertyPath) {
diff --git a/app/markets/components/utils.ts b/app/markets/components/utils.ts
index 79391d77..f23a8909 100644
--- a/app/markets/components/utils.ts
+++ b/app/markets/components/utils.ts
@@ -16,7 +16,7 @@ export const sortProperties = {
   [SortColumn.SupplyAPY]: 'state.supplyApy',
   [SortColumn.Liquidity]: 'state.liquidityAssets',
   [SortColumn.BorrowAPY]: 'state.borrowApy',
-  [SortColumn.RateAtTarget]: 'state.rateAtUTarget',
+  [SortColumn.RateAtTarget]: 'state.apyAtTarget',
 };
 
 export const getNestedProperty = (obj: Market, path: string | ((item: Market) => number)) => {
diff --git a/app/positions/components/ApyPreview.tsx b/app/positions/components/ApyPreview.tsx
new file mode 100644
index 00000000..ab7eed06
--- /dev/null
+++ b/app/positions/components/ApyPreview.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { formatReadable } from '@/utils/balance';
+
+type ApyPreviewProps = {
+  currentApy: number;
+  previewApy?: number | null;
+};
+
+/**
+ * Standardized APY preview component.
+ * Shows current APY in a fixed position, and appends preview to the right when available.
+ * This ensures perfect vertical alignment across all uses.
+ */
+export function ApyPreview({ currentApy, previewApy }: ApyPreviewProps) {
+  const formattedCurrent = formatReadable(currentApy * 100);
+  const formattedPreview = previewApy ? formatReadable(previewApy * 100) : null;
+  const hasPreview = Boolean(previewApy && formattedPreview);
+
+  const currentClasses = `text-foreground${hasPreview ? ' line-through opacity-50' : ''}`;
+
+  return (
+    <span className="whitespace-nowrap text-sm font-semibold">
+      <span className={currentClasses}>{formattedCurrent}%</span>
+      {hasPreview && (
+        <>
+          {' → '}
+          <span className="text-foreground">{formattedPreview}%</span>
+        </>
+      )}
+    </span>
+  );
+}
diff --git a/app/positions/components/FromMarketsTable.tsx b/app/positions/components/FromMarketsTable.tsx
index 8e1b180d..3b9e1335 100644
--- a/app/positions/components/FromMarketsTable.tsx
+++ b/app/positions/components/FromMarketsTable.tsx
@@ -3,7 +3,9 @@ import { Pagination } from '@heroui/react';
 import { Button } from '@/components/common/Button';
 import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/components/MarketIdentity';
 import { formatReadable } from '@/utils/balance';
+import { previewMarketState } from '@/utils/morpho';
 import { MarketPosition } from '@/utils/types';
+import { ApyPreview } from './ApyPreview';
 
 type PositionWithPendingDelta = MarketPosition & { pendingDelta: number };
 
@@ -25,10 +27,18 @@ export function FromMarketsTable({
   const [currentPage, setCurrentPage] = useState(1);
 
   const totalPages = Math.ceil(positions.length / PER_PAGE);
-  const paginatedPositions = positions.slice(
-    (currentPage - 1) * PER_PAGE,
-    currentPage * PER_PAGE,
-  );
+  const paginatedPositions = positions.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE);
+
+  const getApyPreview = (position: PositionWithPendingDelta) => {
+    if (position.pendingDelta === 0) return null;
+
+    try {
+      const deltaBigInt = BigInt(Math.floor(position.pendingDelta));
+      return previewMarketState(position.market, deltaBigInt);
+    } catch {
+      return null;
+    }
+  };
 
   return (
     <div className="space-y-3">
@@ -39,12 +49,17 @@ export function FromMarketsTable({
       ) : (
         <>
           <div className="w-full overflow-x-auto">
-            <table className="responsive w-full rounded-sm font-zen text-sm">
+            <table className="w-full table-fixed rounded-sm font-zen text-sm">
+              <colgroup>
+                <col className="w-auto" />
+                <col className="w-[165px]" />
+                <col className="w-[220px]" />
+              </colgroup>
               <thead className="table-header bg-gray-50 dark:bg-gray-800">
                 <tr>
-                  <th className="px-4 text-left">Market</th>
-                  <th className="px-4 text-center">APY</th>
-                  <th className="px-4 text-center">Supplied Amount</th>
+                  <th className="px-4 py-2 text-left">Market</th>
+                  <th className="px-4 py-2 text-left">APY</th>
+                  <th className="px-4 py-2 text-left">Supplied Amount</th>
                 </tr>
               </thead>
               <tbody>
@@ -62,13 +77,13 @@ export function FromMarketsTable({
                       : adjustedMarketLiquidity;
 
                   const isSelected = position.market.uniqueKey === selectedMarketUniqueKey;
-
+                  const apyPreview = getApyPreview(position);
                   return (
                     <tr
                       key={position.market.uniqueKey}
                       onClick={() => onSelectMarket(position.market.uniqueKey)}
-                      className={`cursor-pointer border-b border-gray-200 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 ${
-                        isSelected ? 'bg-primary/5 border-l-2 border-l-primary' : ''
+                      className={`cursor-pointer border-b border-l-2 border-l-transparent border-gray-200 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 ${
+                        isSelected ? 'bg-primary/5 border-l-primary' : ''
                       }`}
                     >
                       <td className="px-4 py-2">
@@ -86,11 +101,14 @@ export function FromMarketsTable({
                           />
                         </div>
                       </td>
-                      <td className="px-4 py-2 text-center">
-                        {formatReadable(position.market.state.supplyApy * 100)}%
+                      <td className="px-4 py-2">
+                        <ApyPreview
+                          currentApy={position.market.state.supplyApy}
+                          previewApy={apyPreview?.supplyApy ?? null}
+                        />
                       </td>
                       <td className="px-4 py-2">
-                        <div className="flex items-center justify-center gap-2">
+                        <div className="flex items-center gap-2 justify-end">
                           <div>
                             {formatReadable(
                               (Number(position.state.supplyAssets) + Number(position.pendingDelta)) /
diff --git a/app/positions/components/RebalanceActionInput.tsx b/app/positions/components/RebalanceActionInput.tsx
index 3386c865..8ba862ce 100644
--- a/app/positions/components/RebalanceActionInput.tsx
+++ b/app/positions/components/RebalanceActionInput.tsx
@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ArrowRightIcon, Cross2Icon } from '@radix-ui/react-icons';
+import { parseUnits } from 'viem';
 import { Button } from '@/components/common';
 import { MarketIdentity, MarketIdentityMode } from '@/components/MarketIdentity';
+import { TokenIcon } from '@/components/TokenIcon';
+import { previewMarketState } from '@/utils/morpho';
 import { GroupedPosition, Market } from '@/utils/types';
+import { ApyPreview } from './ApyPreview';
 
 type RebalanceActionInputProps = {
   amount: string;
@@ -39,95 +43,128 @@ export function RebalanceActionInput({
     (m) => m.uniqueKey === selectedToMarketUniqueKey,
   );
 
+  // Calculate preview APY for the selected "to" market
+  const previewState = useMemo(() => {
+    if (!selectedToMarket || !amount || Number(amount) <= 0) {
+      return null;
+    }
+    try {
+      const amountBigInt = parseUnits(amount, groupedPosition.loanAssetDecimals);
+      return previewMarketState(selectedToMarket, amountBigInt);
+    } catch {
+      return null;
+    }
+  }, [selectedToMarket, amount, groupedPosition.loanAssetDecimals]);
+
   return (
     <div className="mb-4 rounded-sm border border-gray-200 bg-gray-50/50 p-3 dark:border-gray-700 dark:bg-gray-800/50">
       <div className="mb-2 flex items-center gap-2 text-xs text-secondary">
         <span>Add Rebalance Action</span>
       </div>
 
-      <div className="flex items-center gap-2">
-        {/* From Market Section */}
-        <div className="flex items-center gap-1.5">
-          <span className="text-xs text-secondary">From</span>
-          <div
-            className={`bg-hovered min-w-[140px] rounded-sm border border-gray-200 px-2 py-1.5 dark:border-gray-700 ${
-              selectedFromMarket ? '' : 'border-dashed opacity-60'
-            }`}
-          >
-            {selectedFromMarket ? (
-              <MarketIdentity
-                market={selectedFromMarket}
-                chainId={selectedFromMarket.morphoBlue.chain.id}
-                mode={MarketIdentityMode.Badge}
-              />
-            ) : (
-              <span className="text-xs text-secondary">Select above...</span>
-            )}
-          </div>
-        </div>
-
-        {/* Arrow */}
-        <ArrowRightIcon className="h-4 w-4 text-secondary" />
-
-        {/* To Market Section */}
-        <div className="flex items-center gap-2">
-          <span className="text-xs text-secondary">To</span>
-          <div className="relative">
-            <button
-              type="button"
-              onClick={onToMarketClick}
-              className="bg-hovered min-w-[140px] rounded-sm border border-dashed border-gray-200 px-2 py-1.5 text-left transition-colors hover:border-primary hover:bg-primary/5 dark:border-gray-700 dark:hover:border-primary"
+      <div className="flex flex-wrap items-center gap-y-4">
+        {/* Column 1: From → To Market Section */}
+        <div className="flex min-w-[340px] flex-1 items-center gap-3 pr-8">
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-secondary">From</span>
+            <div
+              className={`bg-hovered min-w-[140px] rounded-sm border border-gray-200 px-2 py-1.5 dark:border-gray-700 ${
+                selectedFromMarket ? '' : 'border-dashed opacity-60'
+              }`}
             >
-              {selectedToMarket ? (
+              {selectedFromMarket ? (
                 <MarketIdentity
-                  market={selectedToMarket}
-                  chainId={selectedToMarket.morphoBlue.chain.id}
+                  market={selectedFromMarket}
+                  chainId={selectedFromMarket.morphoBlue.chain.id}
                   mode={MarketIdentityMode.Badge}
                 />
               ) : (
-                <span className="text-xs text-secondary">Click to select...</span>
+                <span className="text-xs text-secondary">Select above...</span>
               )}
-            </button>
-            {selectedToMarket && onClearToMarket && (
+            </div>
+          </div>
+
+          <ArrowRightIcon className="h-4 w-4 text-secondary" />
+
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-secondary">To</span>
+            <div className="relative">
               <button
                 type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onClearToMarket();
-                }}
-                className="absolute -right-2 -top-2 rounded-full bg-red-500/10 p-0.5 text-red-500 transition-colors hover:bg-red-500/20"
-                aria-label="Clear selection"
+                onClick={onToMarketClick}
+                className="bg-hovered min-w-[140px] rounded-sm border border-dashed border-gray-200 px-2 py-1.5 text-left transition-colors hover:border-primary hover:bg-primary/5 dark:border-gray-700 dark:hover:border-primary"
               >
-                <Cross2Icon className="h-3 w-3" />
+                {selectedToMarket ? (
+                  <MarketIdentity
+                    market={selectedToMarket}
+                    chainId={selectedToMarket.morphoBlue.chain.id}
+                    mode={MarketIdentityMode.Badge}
+                  />
+                ) : (
+                  <span className="text-xs text-secondary">Click to select...</span>
+                )}
               </button>
-            )}
+              {selectedToMarket && onClearToMarket && (
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onClearToMarket();
+                  }}
+                  className="absolute -right-2 -top-2 rounded-full bg-red-500/10 p-0.5 text-red-500 transition-colors hover:bg-red-500/20"
+                  aria-label="Clear selection"
+                >
+                  <Cross2Icon className="h-3 w-3" />
+                </button>
+              )}
+            </div>
           </div>
         </div>
 
-        {/* Amount Input with Token */}
-        <div className="ml-auto flex items-center gap-2">
-          <input
-            type="number"
-            value={amount}
-            onChange={(e) => setAmount(e.target.value)}
-            placeholder="0.0"
-            className="bg-hovered h-8 w-28 rounded-sm px-2 text-right text-sm focus:border-primary focus:outline-none"
-          />
-          <div className="flex items-center gap-1">
-            <span className="text-sm font-medium">{groupedPosition.loanAsset}</span>
-          </div>
+        {/* Column 2: APY Preview */}
+        <div className="flex w-[160px] min-w-[160px] flex-col gap-0.5 pl-6 text-xs">
+          <span className="text-secondary">Market APY</span>
+          {selectedToMarket ? (
+            <ApyPreview
+              currentApy={selectedToMarket.state.supplyApy}
+              previewApy={previewState?.supplyApy ?? null}
+            />
+          ) : (
+            <span className="text-sm">--</span>
+          )}
         </div>
 
-        {/* Add Action Button */}
-        <Button
-          onPress={onAddAction}
-          variant="cta"
-          size="sm"
-          isDisabled={!amount || !selectedFromMarketUniqueKey || !selectedToMarketUniqueKey}
-          className="h-8"
-        >
-          Add to Cart
-        </Button>
+        {/* Column 3: Amount Input + Button */}
+        <div className="flex w-[220px] min-w-[220px] items-center justify-end gap-2 pl-2">
+          <div className="bg-hovered relative h-8 rounded-sm">
+            <input
+              type="number"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+              placeholder="0.0"
+              className="h-full w-32 rounded-sm bg-transparent px-2 pr-8 text-right text-sm focus:border-primary focus:outline-none"
+            />
+            <div className="absolute right-2 top-1/2 -translate-y-1/2">
+              <TokenIcon
+                address={groupedPosition.loanAssetAddress}
+                chainId={groupedPosition.chainId}
+                symbol={groupedPosition.loanAssetSymbol}
+                width={16}
+                height={16}
+              />
+            </div>
+          </div>
+
+          <Button
+            onPress={onAddAction}
+            variant="cta"
+            size="sm"
+            isDisabled={!amount || !selectedFromMarketUniqueKey || !selectedToMarketUniqueKey}
+            className="h-8 w-[64px]"
+          >
+            Add
+          </Button>
+        </div>
       </div>
     </div>
   );
diff --git a/app/positions/components/RebalanceCart.tsx b/app/positions/components/RebalanceCart.tsx
index 6e3aaad4..8659c37e 100644
--- a/app/positions/components/RebalanceCart.tsx
+++ b/app/positions/components/RebalanceCart.tsx
@@ -3,8 +3,10 @@ import { ArrowRightIcon, TrashIcon } from '@radix-ui/react-icons';
 import { formatUnits } from 'viem';
 import { MarketIdentity, MarketIdentityMode } from '@/components/MarketIdentity';
 import { TokenIcon } from '@/components/TokenIcon';
+import { previewMarketState } from '@/utils/morpho';
 import { Market } from '@/utils/types';
 import { GroupedPosition, RebalanceAction } from '@/utils/types';
+import { ApyPreview } from './ApyPreview';
 
 type RebalanceCartProps = {
   rebalanceActions: RebalanceAction[];
@@ -37,72 +39,94 @@ export function RebalanceCart({
         )?.market;
         const toMarket = eligibleMarkets.find((m) => m.uniqueKey === action.toMarket.uniqueKey);
 
+        let apyPreview: ReturnType<typeof previewMarketState> | null = null;
+        if (toMarket) {
+          try {
+            apyPreview = previewMarketState(toMarket, action.amount);
+          } catch {
+            apyPreview = null;
+          }
+        }
+
         return (
           <div
             key={index}
-            className="flex items-center gap-2 rounded-sm border border-gray-200 bg-gray-50/50 p-3 dark:border-gray-700 dark:bg-gray-800/50"
+            className="flex flex-wrap items-center gap-y-4 rounded-sm border border-gray-200 bg-gray-50/50 p-3 dark:border-gray-700 dark:bg-gray-800/50"
           >
-            {/* From Market */}
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-secondary">From</span>
-              <div className="bg-hovered rounded-sm border border-gray-200 px-2 py-1.5 dark:border-gray-700  min-w-[140px]">
-                {fromMarket ? (
-                  <MarketIdentity
-                    market={fromMarket}
-                    chainId={fromMarket.morphoBlue.chain.id}
-                    mode={MarketIdentityMode.Badge}
-                  />
-                ) : (
-                  <span className="text-xs text-secondary">Unknown</span>
-                )}
+            {/* Column 1: From → To Market Section */}
+            <div className="flex min-w-[340px] flex-1 items-center gap-3 pr-8">
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-secondary">From</span>
+                <div className="bg-hovered min-w-[140px] rounded-sm border border-gray-200 px-2 py-1.5 dark:border-gray-700">
+                  {fromMarket ? (
+                    <MarketIdentity
+                      market={fromMarket}
+                      chainId={fromMarket.morphoBlue.chain.id}
+                      mode={MarketIdentityMode.Badge}
+                    />
+                  ) : (
+                    <span className="text-xs text-secondary">Unknown</span>
+                  )}
+                </div>
               </div>
-            </div>
 
-            {/* Arrow */}
-            <ArrowRightIcon className="h-4 w-4 text-secondary" />
+              <ArrowRightIcon className="h-4 w-4 text-secondary" />
 
-            {/* To Market */}
-            <div className="flex items-center gap-2">
-              <span className="text-xs text-secondary">To</span>
-              <div className="bg-hovered rounded-sm border border-gray-200 px-2 py-1.5 dark:border-gray-700  min-w-[140px]">
-                {toMarket ? (
-                  <MarketIdentity
-                    market={toMarket}
-                    chainId={toMarket.morphoBlue.chain.id}
-                    mode={MarketIdentityMode.Badge}
-                  />
-                ) : (
-                  <span className="text-xs text-secondary">Unknown</span>
-                )}
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-secondary">To</span>
+                <div className="bg-hovered min-w-[140px] rounded-sm border border-gray-200 px-2 py-1.5 dark:border-gray-700">
+                  {toMarket ? (
+                    <MarketIdentity
+                      market={toMarket}
+                      chainId={toMarket.morphoBlue.chain.id}
+                      mode={MarketIdentityMode.Badge}
+                    />
+                  ) : (
+                    <span className="text-xs text-secondary">Unknown</span>
+                  )}
+                </div>
               </div>
             </div>
 
-            {/* Amount */}
-            <div className="ml-auto flex items-center gap-2">
-              <span className="text-sm font-medium">
-                {formatUnits(action.amount, groupedPosition.loanAssetDecimals)}
-              </span>
-              <div className="flex items-center gap-1">
-                <TokenIcon
-                  address={groupedPosition.loanAssetAddress}
-                  chainId={groupedPosition.chainId}
-                  symbol={groupedPosition.loanAssetSymbol}
-                  width={16}
-                  height={16}
+            {/* Column 2: APY Preview */}
+            <div className="flex w-[160px] min-w-[160px] flex-col gap-0.5 pl-6 text-xs">
+              <span className="text-secondary">Market APY</span>
+              {toMarket ? (
+                <ApyPreview
+                  currentApy={toMarket.state.supplyApy}
+                  previewApy={apyPreview?.supplyApy ?? null}
                 />
-                <span className="text-sm font-medium">{groupedPosition.loanAsset}</span>
-              </div>
+              ) : (
+                <span className="text-sm font-semibold text-secondary/60">--</span>
+              )}
             </div>
 
-            {/* Remove Button */}
-            <button
-              type="button"
-              onClick={() => removeRebalanceAction(index)}
-              className="rounded-sm p-1.5 text-secondary transition-colors hover:bg-red-500/10 hover:text-red-500"
-              aria-label="Remove action"
-            >
-              <TrashIcon className="h-4 w-4" />
-            </button>
+            {/* Column 3: Amount + Remove Button */}
+            <div className="flex w-[220px] min-w-[220px] items-center justify-end gap-2 pl-2">
+              <div className="bg-hovered relative flex h-8 w-32 items-center rounded-sm px-2 justify-end">
+                <span className="text-right pr-8">
+                  {formatUnits(action.amount, groupedPosition.loanAssetDecimals)}
+                </span>
+                <div className="absolute right-2 top-1/2 -translate-y-1/2">
+                  <TokenIcon
+                    address={groupedPosition.loanAssetAddress}
+                    chainId={groupedPosition.chainId}
+                    symbol={groupedPosition.loanAssetSymbol}
+                    width={16}
+                    height={16}
+                  />
+                </div>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => removeRebalanceAction(index)}
+                className="rounded-sm flex items-center justify-center p-1.5 text-secondary transition-colors hover:bg-red-500/10 hover:text-red-500 h-8 w-[64px]"
+                aria-label="Remove action"
+              >
+                <TrashIcon className="h-4 w-4" />
+              </button>
+            </div>
           </div>
         );
       })}
diff --git a/app/positions/components/RebalanceModal.tsx b/app/positions/components/RebalanceModal.tsx
index dd99297b..cf425d63 100644
--- a/app/positions/components/RebalanceModal.tsx
+++ b/app/positions/components/RebalanceModal.tsx
@@ -282,7 +282,7 @@ export function RebalanceModal({
         isOpen={isOpen}
         onClose={onClose}
         isDismissable={false}
-        size="3xl"
+        size="4xl"
         classNames={{
           base: 'p-4 rounded-sm',
         }}
diff --git a/docs/Styling.md b/docs/Styling.md
index f10ff66b..41980dc8 100644
--- a/docs/Styling.md
+++ b/docs/Styling.md
@@ -266,6 +266,7 @@ Works with all three modes (Normal, Focused, Minimum). Use in table cells with a
 ```
 
 **MarketDetailsBlock** (`@/components/common/MarketDetailsBlock`)
+- Used for previewing transactions onto a existing market.
 - Use as an expandable row in modals (e.g., supply/borrow flows)
 - Shows market state details when expanded (APY, liquidity, utilization, etc.)
 - Includes collapse/expand functionality
@@ -283,8 +284,8 @@ import { MarketDetailsBlock } from '@/components/common/MarketDetailsBlock';
 ```
 
 **When to use which:**
-- Tables/Lists/Cards → Use `MarketIdentity`
-- Modal flows with expandable details → Use `MarketDetailsBlock`
+- Tables/Lists/Cards, Data display → Use `MarketIdentity`
+- Modal flows during a transaction, with expandable details → Use `MarketDetailsBlock`
 
 **MarketIdBadge** (`@/components/MarketIdBadge`)
 - Use to display a short market ID badge with optional network icon and warning indicator
diff --git a/package.json b/package.json
index 14a98d58..dc3a8065 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@heroui/theme": "^2.2.6",
     "@heroui/tooltip": "^2.0.36",
     "@internationalized/date": "^3.8.2",
+    "@morpho-org/blue-sdk": "^5.3.0",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0956ecd1..0f62521f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       '@internationalized/date':
         specifier: ^3.8.2
         version: 3.8.2
+      '@morpho-org/blue-sdk':
+        specifier: ^5.3.0
+        version: 5.3.0(@morpho-org/morpho-ts@2.4.4)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
         version: 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2354,6 +2357,14 @@ packages:
     resolution: {integrity: sha512-w8CVbdkDrVXFJbfBSlDfafDR6BAkpDmv1bC1UJVCoVny5tW2RKAdn9i68Xf7asYT4TnUhl/hN4zfUiKQq9II4g==}
     engines: {node: '>=16.0.0'}
 
+  '@morpho-org/blue-sdk@5.3.0':
+    resolution: {integrity: sha512-fHjpNJZZF+zi/ElDkh2pCsWCODcmxJmgwgkNeRPRtHK5ITeQ3hJ+Eccr7sLg6R1dsqC4JNbxkQPDtIaa8h5QHw==}
+    peerDependencies:
+      '@morpho-org/morpho-ts': ^2.4.3
+
+  '@morpho-org/morpho-ts@2.4.4':
+    resolution: {integrity: sha512-Nb6sVXOtE6CajMBceXpEnPbV42nszvTIeDOJt4+E66nWtTHLvk2z5xAx/qbrQyiBtyDQmCWhP1oQnjf7yg8Zow==}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -3500,6 +3511,15 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/lodash.isplainobject@4.0.9':
+    resolution: {integrity: sha512-QC8nKcap5hRrbtIaPRjUMlcXXnLeayqQZPSaWJDx3xeuN17+2PW5wkmEJ4+lZgNnQRlSPzxjTYKCfV1uTnPaEg==}
+
+  '@types/lodash.mergewith@4.6.9':
+    resolution: {integrity: sha512-fgkoCAOF47K7sxrQ7Mlud2TH023itugZs2bUg8h/KzT+BnZNrR2jAOmaokbLunHNnobXVWOezAeNn/lZqwxkcw==}
+
+  '@types/lodash@4.17.20':
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -5916,12 +5936,18 @@ packages:
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash.mergewith@4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+
   lodash.truncate@4.4.2:
     resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
 
@@ -10881,6 +10907,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@morpho-org/blue-sdk@5.3.0(@morpho-org/morpho-ts@2.4.4)':
+    dependencies:
+      '@morpho-org/morpho-ts': 2.4.4
+      '@noble/hashes': 1.8.0
+      '@types/lodash.isplainobject': 4.0.9
+      '@types/lodash.mergewith': 4.6.9
+      lodash.isplainobject: 4.0.6
+      lodash.mergewith: 4.6.2
+
+  '@morpho-org/morpho-ts@2.4.4': {}
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.4.5
@@ -12581,6 +12618,16 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/lodash.isplainobject@4.0.9':
+    dependencies:
+      '@types/lodash': 4.17.20
+
+  '@types/lodash.mergewith@4.6.9':
+    dependencies:
+      '@types/lodash': 4.17.20
+
+  '@types/lodash@4.17.20': {}
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -16039,10 +16086,14 @@ snapshots:
 
   lodash.debounce@4.0.8: {}
 
+  lodash.isplainobject@4.0.6: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
 
+  lodash.mergewith@4.6.2: {}
+
   lodash.truncate@4.4.2: {}
 
   lodash@4.17.21: {}
diff --git a/src/components/SupplyModalContent.tsx b/src/components/SupplyModalContent.tsx
index 5de40202..28bacb31 100644
--- a/src/components/SupplyModalContent.tsx
+++ b/src/components/SupplyModalContent.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Switch } from '@heroui/react';
 import { useAccount } from 'wagmi';
 import Input from '@/components/Input/Input';
@@ -17,12 +17,14 @@ type SupplyModalContentProps = {
   market: Market;
   onClose: () => void;
   refetch: () => void;
+  onAmountChange?: (amount: bigint | undefined) => void;
 };
 
 export function SupplyModalContent({
   onClose,
   market,
   refetch,
+  onAmountChange,
 }: SupplyModalContentProps): JSX.Element {
   const [usePermit2Setting] = useLocalStorage('usePermit2', true);
   const { isConnected } = useAccount();
@@ -53,6 +55,11 @@ export function SupplyModalContent({
     signAndSupply,
   } = useSupplyMarket(market, onSuccess);
 
+  // Notify parent component when supply amount changes
+  useEffect(() => {
+    onAmountChange?.(supplyAmount);
+  }, [supplyAmount, onAmountChange]);
+
   // Use the market network hook to handle network switching
   const { needSwitchChain, switchToNetwork } = useMarketNetwork({
     targetChainId: market.morphoBlue.chain.id,
diff --git a/src/components/SupplyModalV2.tsx b/src/components/SupplyModalV2.tsx
index cf399c5a..85d4c62c 100644
--- a/src/components/SupplyModalV2.tsx
+++ b/src/components/SupplyModalV2.tsx
@@ -25,6 +25,7 @@ export function SupplyModalV2({
   defaultMode = 'supply',
 }: SupplyModalV2Props): JSX.Element {
   const [mode, setMode] = useState<'supply' | 'withdraw'>(defaultMode);
+  const [supplyPreviewAmount, setSupplyPreviewAmount] = useState<bigint | undefined>();
 
   const hasPosition = position && BigInt(position.state.supplyAssets) > 0n;
 
@@ -82,11 +83,17 @@ export function SupplyModalV2({
               defaultCollapsed
               mode="supply"
               showRewards
+              loanAssetDelta={mode === 'supply' ? supplyPreviewAmount : undefined}
             />
           </div>
 
           {mode === 'supply' ? (
-            <SupplyModalContent market={market} onClose={onClose} refetch={refetch ?? (() => {})} />
+            <SupplyModalContent
+              market={market}
+              onClose={onClose}
+              refetch={refetch ?? (() => {})}
+              onAmountChange={setSupplyPreviewAmount}
+            />
           ) : (
             <WithdrawModalContent
               position={position}
diff --git a/src/components/common/MarketDetailsBlock.tsx b/src/components/common/MarketDetailsBlock.tsx
index 458bbfc0..1fc8a86f 100644
--- a/src/components/common/MarketDetailsBlock.tsx
+++ b/src/components/common/MarketDetailsBlock.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
 import { motion, AnimatePresence } from 'framer-motion';
 import { formatUnits } from 'viem';
 import { useMarketCampaigns } from '@/hooks/useMarketCampaigns';
 import { formatBalance, formatReadable } from '@/utils/balance';
-import { getIRMTitle } from '@/utils/morpho';
+import { getIRMTitle, previewMarketState } from '@/utils/morpho';
 import { getTruncatedAssetName } from '@/utils/oracle';
 import { Market } from '@/utils/types';
 import OracleVendorBadge from '../OracleVendorBadge';
@@ -17,6 +17,7 @@ type MarketDetailsBlockProps = {
   mode?: 'supply' | 'borrow';
   showRewards?: boolean;
   disableExpansion?: boolean;
+  loanAssetDelta?: bigint;
 };
 
 export function MarketDetailsBlock({
@@ -26,6 +27,7 @@ export function MarketDetailsBlock({
   mode = 'supply',
   showRewards = false,
   disableExpansion = false,
+  loanAssetDelta,
 }: MarketDetailsBlockProps): JSX.Element {
   const [isExpanded, setIsExpanded] = useState(!defaultCollapsed && !disableExpansion);
 
@@ -36,12 +38,26 @@ export function MarketDetailsBlock({
     whitelisted: market.whitelisted && !market.isMonarchWhitelisted
   });
 
+  // Calculate preview state when loanAssetDelta is provided
+  const previewState = useMemo(() => {
+    if (!loanAssetDelta || loanAssetDelta <= 0n || mode !== 'supply') {
+      return null;
+    }
+    return previewMarketState(market, loanAssetDelta);
+  }, [market, loanAssetDelta, mode]);
+
   // Helper to format APY based on mode
   const getAPY = () => {
     const apy = mode === 'supply' ? market.state.supplyApy : market.state.borrowApy;
     return (apy * 100).toFixed(2);
   };
 
+  const getPreviewAPY = () => {
+    if (!previewState) return null;
+    const apy = mode === 'supply' ? previewState.supplyApy : previewState.borrowApy;
+    return apy ? (apy * 100).toFixed(2) : null;
+  };
+
   return (
     <div>
       {/* Collapsible Market Details */}
@@ -108,7 +124,18 @@ export function MarketDetailsBlock({
                   chainId={market.morphoBlue.chain.id}
                 />
                 <span>·</span>
-                <span>{getAPY()}% APY</span>
+                {previewState !== null ? (
+                  <span>
+                    <span className="line-through opacity-50">{getAPY()}%</span>
+                    {' → '}
+                    <span className="font-semibold">
+                      {getPreviewAPY()}%
+                    </span>
+                    {' APY'}
+                  </span>
+                ) : (
+                  <span>{getAPY()}% APY</span>
+                )}
                 <span>·</span>
                 <span>{(Number(market.lltv) / 1e16).toFixed(0)}% LLTV</span>
               </div>
@@ -156,7 +183,17 @@ export function MarketDetailsBlock({
                       <p className="font-zen text-sm opacity-50">
                         {mode === 'supply' ? 'Supply' : 'Borrow'} APY:
                       </p>
-                      <p className="text-right text-sm font-bold">{getAPY()}%</p>
+                      {previewState !== null ? (
+                        <p className="text-right text-sm font-bold">
+                          <span className="line-through opacity-50">{getAPY()}%</span>
+                          {' → '}
+                          <span>
+                            {getPreviewAPY()}%
+                          </span>
+                        </p>
+                      ) : (
+                        <p className="text-right text-sm font-bold">{getAPY()}%</p>
+                      )}
                     </div>
                     {showRewards && hasActiveRewards && (
                       <div className="flex items-start justify-between">
@@ -182,25 +219,69 @@ export function MarketDetailsBlock({
                     )}
                     <div className="flex items-start justify-between">
                       <p className="font-zen text-sm opacity-50">Total Supply:</p>
-                      <p className="text-right text-sm">
-                        {formatReadable(
-                          formatBalance(market.state.supplyAssets, market.loanAsset.decimals),
-                        )}
-                      </p>
+                      {previewState !== null ? (
+                        <p className="text-right text-sm">
+                          <span className="line-through opacity-50">
+                            {formatReadable(
+                              formatBalance(market.state.supplyAssets, market.loanAsset.decimals),
+                            )}
+                          </span>
+                          {' → '}
+                          <span>
+                            {formatReadable(
+                              formatBalance(previewState.totalSupplyAssets.toString(), market.loanAsset.decimals),
+                            )}
+                          </span>
+                        </p>
+                      ) : (
+                        <p className="text-right text-sm">
+                          {formatReadable(
+                            formatBalance(market.state.supplyAssets, market.loanAsset.decimals),
+                          )}
+                        </p>
+                      )}
                     </div>
                     <div className="flex items-start justify-between">
                       <p className="font-zen text-sm opacity-50">Liquidity:</p>
-                      <p className="text-right font-zen text-sm">
-                        {formatReadable(
-                          formatBalance(market.state.liquidityAssets, market.loanAsset.decimals),
-                        )}
-                      </p>
+                      {previewState !== null ? (
+                        <p className="text-right font-zen text-sm">
+                          <span className="line-through opacity-50">
+                            {formatReadable(
+                              formatBalance(market.state.liquidityAssets, market.loanAsset.decimals),
+                            )}
+                          </span>
+                          {' → '}
+                          <span>
+                            {formatReadable(
+                              formatBalance(previewState.liquidityAssets.toString(), market.loanAsset.decimals),
+                            )}
+                          </span>
+                        </p>
+                      ) : (
+                        <p className="text-right font-zen text-sm">
+                          {formatReadable(
+                            formatBalance(market.state.liquidityAssets, market.loanAsset.decimals),
+                          )}
+                        </p>
+                      )}
                     </div>
                     <div className="flex items-start justify-between">
                       <p className="font-zen text-sm opacity-50">Utilization:</p>
-                      <p className="text-right text-sm">
-                        {formatReadable(market.state.utilization * 100)}%
-                      </p>
+                      {previewState !== null ? (
+                        <p className="text-right text-sm">
+                          <span className="line-through opacity-50">
+                            {formatReadable(market.state.utilization * 100)}%
+                          </span>
+                          {' → '}
+                          <span>
+                            {formatReadable(previewState.utilization * 100)}%
+                          </span>
+                        </p>
+                      ) : (
+                        <p className="text-right text-sm">
+                          {formatReadable(market.state.utilization * 100)}%
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
diff --git a/src/components/common/MarketSelectionModal.tsx b/src/components/common/MarketSelectionModal.tsx
index 41db3abd..8c6671a1 100644
--- a/src/components/common/MarketSelectionModal.tsx
+++ b/src/components/common/MarketSelectionModal.tsx
@@ -107,7 +107,7 @@ export function MarketSelectionModal({
       size="4xl"
       scrollBehavior="inside"
       classNames={{
-        wrapper: 'z-[2200]',
+        wrapper: 'z-[2200] max-h-[80%] overflow-y-auto',
         backdrop: 'z-[2190] bg-black/60',
         base: 'rounded-sm bg-surface',
         header: 'px-6 pt-6 pb-2',
diff --git a/src/components/common/MarketsTableWithSameLoanAsset.tsx b/src/components/common/MarketsTableWithSameLoanAsset.tsx
index 3ecf26fb..2ab4493b 100644
--- a/src/components/common/MarketsTableWithSameLoanAsset.tsx
+++ b/src/components/common/MarketsTableWithSameLoanAsset.tsx
@@ -467,7 +467,7 @@ function MarketRow({
       {columnVisibility.rateAtTarget && (
         <td data-label="Target Rate" className="z-50 py-1 text-center" style={{ minWidth: '110px' }}>
           <p className="text-sm">
-            {market.state.rateAtUTarget ? `${(market.state.rateAtUTarget * 100).toFixed(2)}%` : '—'}
+            {market.state.apyAtTarget ? `${(market.state.apyAtTarget * 100).toFixed(2)}%` : '—'}
           </p>
         </td>
       )}
@@ -668,7 +668,7 @@ export function MarketsTableWithSameLoanAsset({
       [SortColumn.Liquidity]: 'state.liquidityAssets',
       [SortColumn.Borrow]: 'state.borrowAssetsUsd',
       [SortColumn.BorrowAPY]: 'state.borrowApy',
-      [SortColumn.RateAtTarget]: 'state.rateAtUTarget',
+      [SortColumn.RateAtTarget]: 'state.apyAtTarget',
       [SortColumn.Risk]: '', // No sorting for risk
     };
 
@@ -724,7 +724,7 @@ export function MarketsTableWithSameLoanAsset({
 
   return (
     <div className="space-y-3">
-      {/* Cart/Staging Area - MarketDetailsBlock Style */}
+      {/* Cart/Staging Area Style */}
       {showCart && selectedMarkets.length > 0 && (
         <div className="space-y-2">
           {selectedMarkets.map(({ market }) => (
diff --git a/src/constants/chartColors.ts b/src/constants/chartColors.ts
index 26aa111e..4ccac946 100644
--- a/src/constants/chartColors.ts
+++ b/src/constants/chartColors.ts
@@ -18,7 +18,7 @@ export const CHART_COLORS = {
       endOpacity: 0,
     },
   },
-  rateAtUTarget: {
+  apyAtTarget: {
     stroke: '#F59E0B',
     gradient: {
       start: '#F59E0B',
diff --git a/src/data-sources/morpho-api/historical.ts b/src/data-sources/morpho-api/historical.ts
index 02a2bf35..c9b96d40 100644
--- a/src/data-sources/morpho-api/historical.ts
+++ b/src/data-sources/morpho-api/historical.ts
@@ -71,7 +71,7 @@ export const fetchMorphoMarketHistoricalData = async (
     const rates: MarketRates = {
       supplyApy: historicalState.supplyApy ?? [],
       borrowApy: historicalState.borrowApy ?? [],
-      rateAtUTarget: historicalState.rateAtUTarget ?? [],
+      apyAtTarget: historicalState.apyAtTarget ?? [],
       utilization: historicalState.utilization ?? [],
     };
     const volumes: MarketVolumes = {
diff --git a/src/data-sources/subgraph/historical.ts b/src/data-sources/subgraph/historical.ts
index d5fe8766..f8a63fc6 100644
--- a/src/data-sources/subgraph/historical.ts
+++ b/src/data-sources/subgraph/historical.ts
@@ -44,7 +44,7 @@ const transformSubgraphSnapshotsToHistoricalResult = (
   const rates: MarketRates = {
     supplyApy: [] as TimeseriesDataPoint[],
     borrowApy: [] as TimeseriesDataPoint[],
-    rateAtUTarget: [] as TimeseriesDataPoint[],
+    apyAtTarget: [] as TimeseriesDataPoint[],
     utilization: [] as TimeseriesDataPoint[],
   };
   const volumes: MarketVolumes = {
@@ -73,7 +73,7 @@ const transformSubgraphSnapshotsToHistoricalResult = (
 
     rates.supplyApy.push({ x: timestamp, y: !isNaN(supplyApyValue) ? supplyApyValue : 0 });
     rates.borrowApy.push({ x: timestamp, y: !isNaN(borrowApyValue) ? borrowApyValue : 0 });
-    rates.rateAtUTarget.push({ x: timestamp, y: 0 });
+    rates.apyAtTarget.push({ x: timestamp, y: 0 });
     rates.utilization.push({ x: timestamp, y: 0 });
 
     const supplyNative = BigInt(snapshot.inputTokenBalance ?? '0');
diff --git a/src/data-sources/subgraph/market.ts b/src/data-sources/subgraph/market.ts
index 87f794b8..1b03a590 100644
--- a/src/data-sources/subgraph/market.ts
+++ b/src/data-sources/subgraph/market.ts
@@ -248,7 +248,12 @@ const transformSubgraphMarketToMarket = (
       borrowApy: borrowApy,
       fee: safeParseFloat(fee) / 10000, // Subgraph fee is likely basis points (needs verification)
       timestamp: timestamp,
-      rateAtUTarget: 0, // Not available from subgraph
+
+      // AdaptiveCurveIRM APY if utilization was at target
+      apyAtTarget: 0, // Not available from subgraph
+      
+      // AdaptiveCurveIRM rate per second if utilization was at target
+      rateAtTarget: '0', // Not available from subgraph
     },
     oracleAddress: oracleAddress,
     morphoBlue: {
diff --git a/src/graphql/morpho-api-queries.ts b/src/graphql/morpho-api-queries.ts
index eea9f7b9..8daad291 100644
--- a/src/graphql/morpho-api-queries.ts
+++ b/src/graphql/morpho-api-queries.ts
@@ -59,7 +59,8 @@ state {
   borrowApy
   fee
   timestamp
-  rateAtUTarget
+  apyAtTarget
+  rateAtTarget
 }
 warnings {
   type
@@ -204,7 +205,8 @@ export const marketsQuery = `
       borrowApy
       fee
       timestamp
-      rateAtUTarget
+      apyAtTarget
+      rateAtTarget
     }
     warnings {
       type
@@ -345,7 +347,7 @@ export const marketHistoricalDataQuery = `
           x
           y
         }
-        rateAtUTarget(options: $options) {
+        apyAtTarget(options: $options) {
           x
           y
         }
diff --git a/src/utils/morpho.ts b/src/utils/morpho.ts
index d85b0a72..cbeab461 100644
--- a/src/utils/morpho.ts
+++ b/src/utils/morpho.ts
@@ -1,6 +1,7 @@
+import { Market as BlueMarket, MarketParams as BlueMarketParams } from '@morpho-org/blue-sdk';
 import { Address, decodeAbiParameters, encodeAbiParameters, keccak256, parseAbiParameters, zeroAddress } from 'viem';
 import { SupportedNetworks } from './networks';
-import { MarketParams, UserTxTypes } from './types';
+import { Market, MarketParams, UserTxTypes } from './types';
 // appended to the end of datahash to identify a monarch tx
 export const MONARCH_TX_IDENTIFIER = 'beef';
 
@@ -215,9 +216,9 @@ export function parseCapIdParams(idParams: string): {
       );
 
       if (decoded[0] === 'this/marketParams') {
-         
+
         const marketParamsBlock = decoded[2] as [any];
-         
+
         const marketParams = marketParamsBlock[0] as any as MarketParams;
 
         // Create a market ID hash from the market params
@@ -241,3 +242,60 @@ export function parseCapIdParams(idParams: string): {
     return { type: 'unknown' };
   }
 }
+
+// ============================================================================
+// Supply Preview Utilities
+// ============================================================================
+
+type MarketStatePreview = {
+  supplyApy: number;
+  borrowApy: number;
+  utilization: number; // scaled down WAD
+  totalSupplyAssets: bigint;
+  totalBorrowAssets: bigint;
+  liquidityAssets: bigint;
+};
+
+/**
+ * Simulates a supply operation and returns the full market state preview.
+ *
+ * @param market - The market configuration and state
+ * @param supplyAmount - The amount to simulate supplying (in asset units, positive for supply)
+ * @returns The estimated market state after the action, or null if simulation fails
+ */
+export function previewMarketState(market: Market, supplyAmount: bigint): MarketStatePreview | null {
+  try {
+    const params = new BlueMarketParams({
+      loanToken: market.loanAsset.address as Address,
+      collateralToken: market.collateralAsset.address as Address,
+      oracle: market.oracleAddress as Address,
+      irm: market.irmAddress as Address,
+      lltv: BigInt(market.lltv),
+    });
+
+    const blueMarket = new BlueMarket({
+      params,
+      totalSupplyAssets: BigInt(market.state.supplyAssets),
+      totalBorrowAssets: BigInt(market.state.borrowAssets),
+      totalSupplyShares: BigInt(market.state.supplyShares),
+      totalBorrowShares: BigInt(market.state.borrowShares),
+      lastUpdate: BigInt(market.state.timestamp), // not really the last timestamp but doesn't matter.
+      rateAtTarget: BigInt(market.state.rateAtTarget),
+      fee: BigInt(Math.floor(market.state.fee * 1e18)),
+    });
+
+    const { market: updated } = blueMarket.supply(supplyAmount, 0n);
+
+    return {
+      supplyApy: updated.supplyApy,
+      borrowApy: updated.borrowApy,
+      utilization: Number(updated.utilization) / 1e18,
+      totalSupplyAssets: updated.totalSupplyAssets,
+      totalBorrowAssets: updated.totalBorrowAssets,
+      liquidityAssets: updated.liquidity,
+    };
+  } catch (error) {
+    console.error('Error previewing market state:', error);
+    return null;
+  }
+}
diff --git a/src/utils/types.ts b/src/utils/types.ts
index bdcce659..dc0d3cfa 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -298,7 +298,12 @@ export type Market = {
     borrowApy: number;
     fee: number;
     timestamp: number;
-    rateAtUTarget: number;
+
+    // AdaptiveCurveIRM APY if utilization was at target
+    apyAtTarget: number;
+
+    // AdaptiveCurveIRM rate per second if utilization was at target
+    rateAtTarget: string;
   };
   realizedBadDebt: {
     underlying: string
@@ -329,7 +334,7 @@ export type TimeseriesOptions = {
 export type MarketRates = {
   supplyApy: TimeseriesDataPoint[];
   borrowApy: TimeseriesDataPoint[];
-  rateAtUTarget: TimeseriesDataPoint[];
+  apyAtTarget: TimeseriesDataPoint[];
   utilization: TimeseriesDataPoint[];
 };