diff --git a/app/positions/components/ApyPreview.tsx b/app/positions/components/ApyPreview.tsx
index ab7eed06..221f003a 100644
--- a/app/positions/components/ApyPreview.tsx
+++ b/app/positions/components/ApyPreview.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatReadable } from '@/utils/balance';
+import { MetricPreview } from './MetricPreview';
 
 type ApyPreviewProps = {
   currentApy: number;
@@ -7,26 +7,9 @@ type ApyPreviewProps = {
 };
 
 /**
- * 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.
+ * APY preview component.
+ * Thin wrapper around MetricPreview for APY-specific usage.
  */
 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>
-  );
+  return <MetricPreview currentValue={currentApy} previewValue={previewApy} label="APY" />;
 }
diff --git a/app/positions/components/FromMarketsTable.tsx b/app/positions/components/FromMarketsTable.tsx
index ade637de..3a73ce47 100644
--- a/app/positions/components/FromMarketsTable.tsx
+++ b/app/positions/components/FromMarketsTable.tsx
@@ -5,7 +5,6 @@ import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/compo
 import { formatReadable } from '@/utils/balance';
 import { previewMarketState } from '@/utils/morpho';
 import { MarketPosition } from '@/utils/types';
-import { ApyPreview } from './ApyPreview';
 
 type PositionWithPendingDelta = MarketPosition & { pendingDelta: number };
 
@@ -52,13 +51,15 @@ export function FromMarketsTable({
             <table className="w-full table-fixed rounded-sm font-zen text-sm">
               <colgroup>
                 <col className="w-auto" />
-                <col className="w-[165px]" />
+                <col className="w-[120px]" />
+                <col className="w-[120px]" />
                 <col className="w-[220px]" />
               </colgroup>
               <thead className="table-header bg-gray-50 dark:bg-gray-800">
                 <tr>
                   <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-right">APY</th>
+                  <th className="px-4 py-2 text-right">Util</th>
                   <th className="px-4 py-2 text-left">Supplied Amount</th>
                 </tr>
               </thead>
@@ -101,11 +102,35 @@ export function FromMarketsTable({
                           />
                         </div>
                       </td>
-                      <td className="px-4 py-2">
-                        <ApyPreview
-                          currentApy={position.market.state.supplyApy}
-                          previewApy={apyPreview?.supplyApy ?? null}
-                        />
+                      <td className="px-4 py-2 text-right">
+                        {apyPreview ? (
+                          <span className="whitespace-nowrap text-sm text-foreground">
+                            <span className="line-through opacity-50">
+                              {formatReadable(position.market.state.supplyApy * 100)}%
+                            </span>
+                            {' → '}
+                            <span>{formatReadable(apyPreview.supplyApy * 100)}%</span>
+                          </span>
+                        ) : (
+                          <span className="whitespace-nowrap text-sm text-foreground">
+                            {formatReadable(position.market.state.supplyApy * 100)}%
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-2 text-right">
+                        {apyPreview ? (
+                          <span className="whitespace-nowrap text-sm text-foreground">
+                            <span className="line-through opacity-50">
+                              {formatReadable(position.market.state.utilization * 100)}%
+                            </span>
+                            {' → '}
+                            <span>{formatReadable(apyPreview.utilization * 100)}%</span>
+                          </span>
+                        ) : (
+                          <span className="whitespace-nowrap text-sm text-foreground">
+                            {formatReadable(position.market.state.utilization * 100)}%
+                          </span>
+                        )}
                       </td>
                       <td className="px-4 py-2">
                         <div className="flex items-center gap-2 justify-end">
diff --git a/app/positions/components/MetricPreview.tsx b/app/positions/components/MetricPreview.tsx
new file mode 100644
index 00000000..ec47fa91
--- /dev/null
+++ b/app/positions/components/MetricPreview.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Tooltip } from '@heroui/react';
+import { TooltipContent } from '@/components/TooltipContent';
+import { formatReadable } from '@/utils/balance';
+
+type MetricPreviewProps = {
+  currentValue: number;
+  previewValue?: number | null;
+  label: string;
+};
+
+/**
+ * Generic metric preview component.
+ * Shows preview value if available, otherwise shows current value.
+ * Displays tooltip on hover showing before/after values.
+ */
+export function MetricPreview({ currentValue, previewValue, label }: MetricPreviewProps) {
+  const formattedCurrent = formatReadable(currentValue * 100);
+  const formattedPreview = previewValue ? formatReadable(previewValue * 100) : null;
+  const hasPreview = Boolean(previewValue && formattedPreview);
+
+  // Show preview value if available, otherwise show current value
+  const displayValue = hasPreview ? formattedPreview : formattedCurrent;
+
+  if (!hasPreview) {
+    return (
+      <span className="inline-block min-w-[60px] whitespace-nowrap text-right text-sm text-foreground">
+        {displayValue}%
+      </span>
+    );
+  }
+
+  return (
+    <Tooltip
+      classNames={{
+        base: 'p-0 m-0 bg-transparent shadow-sm border-none',
+        content: 'p-0 m-0 bg-transparent shadow-sm border-none',
+      }}
+      content={
+        <TooltipContent
+          title={`${label} Change`}
+          detail={`${formattedCurrent}% → ${formattedPreview}%`}
+        />
+      }
+    >
+      <span className="inline-block min-w-[60px] cursor-help whitespace-nowrap border-b border-dashed border-gray-400 text-right text-sm text-foreground">
+        {displayValue}%
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/app/positions/components/RebalanceActionInput.tsx b/app/positions/components/RebalanceActionInput.tsx
index 8e1a0805..8b578fb1 100644
--- a/app/positions/components/RebalanceActionInput.tsx
+++ b/app/positions/components/RebalanceActionInput.tsx
@@ -1,12 +1,6 @@
-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 React from 'react';
 import { GroupedPosition, Market } from '@/utils/types';
-import { ApyPreview } from './ApyPreview';
+import { RebalanceActionRow } from './RebalanceActionRow';
 
 type RebalanceActionInputProps = {
   amount: string;
@@ -43,129 +37,24 @@ 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, undefined);
-    } 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 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'
-              }`}
-            >
-              {selectedFromMarket ? (
-                <MarketIdentity
-                  market={selectedFromMarket}
-                  chainId={selectedFromMarket.morphoBlue.chain.id}
-                  mode={MarketIdentityMode.Badge}
-                />
-              ) : (
-                <span className="text-xs text-secondary">Select above...</span>
-              )}
-            </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={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"
-              >
-                {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>
-
-        {/* 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>
-
-        {/* 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>
+      <RebalanceActionRow
+        mode="input"
+        fromMarket={selectedFromMarket}
+        toMarket={selectedToMarket}
+        amount={amount}
+        groupedPosition={groupedPosition}
+        onAmountChange={setAmount}
+        onToMarketClick={onToMarketClick}
+        onClearToMarket={onClearToMarket}
+        onAddAction={onAddAction}
+        isAddDisabled={!amount || !selectedFromMarketUniqueKey || !selectedToMarketUniqueKey}
+      />
     </div>
   );
 }
diff --git a/app/positions/components/RebalanceActionRow.tsx b/app/positions/components/RebalanceActionRow.tsx
new file mode 100644
index 00000000..d6de3fcb
--- /dev/null
+++ b/app/positions/components/RebalanceActionRow.tsx
@@ -0,0 +1,253 @@
+import React, { useMemo } from 'react';
+import { ArrowRightIcon, Cross2Icon, TrashIcon } from '@radix-ui/react-icons';
+import { formatUnits, 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';
+import { UtilizationPreview } from './UtilizationPreview';
+
+type RebalanceActionRowMode = 'input' | 'display';
+
+type RebalanceActionRowProps = {
+  mode: RebalanceActionRowMode;
+
+  // Market selection
+  fromMarket?: Market;
+  toMarket?: Market;
+
+  // Amount (string for input mode, bigint for display mode)
+  amount: string | bigint;
+
+  // Common
+  groupedPosition: GroupedPosition;
+
+  // Input mode specific
+  onAmountChange?: (amount: string) => void;
+  onToMarketClick?: () => void;
+  onClearToMarket?: () => void;
+  onAddAction?: () => void;
+  isAddDisabled?: boolean;
+
+  // Display mode specific
+  onRemoveAction?: () => void;
+};
+
+/**
+ * Shared component for displaying rebalance action rows.
+ * Used in both RebalanceActionInput (input mode) and RebalanceCart (display mode).
+ * This ensures perfect alignment and consistency between the two contexts.
+ */
+export function RebalanceActionRow({
+  mode,
+  fromMarket,
+  toMarket,
+  amount,
+  groupedPosition,
+  onAmountChange,
+  onToMarketClick,
+  onClearToMarket,
+  onAddAction,
+  isAddDisabled = false,
+  onRemoveAction,
+}: RebalanceActionRowProps) {
+  // Calculate preview state for the "to" market
+  const previewState = useMemo(() => {
+    if (!toMarket || !amount) {
+      return null;
+    }
+    try {
+      const amountBigInt =
+        typeof amount === 'string'
+          ? parseUnits(amount, groupedPosition.loanAssetDecimals)
+          : amount;
+
+      if (amountBigInt <= 0n) {
+        return null;
+      }
+
+      return previewMarketState(toMarket, amountBigInt, undefined);
+    } catch {
+      return null;
+    }
+  }, [toMarket, amount, groupedPosition.loanAssetDecimals]);
+
+  // Format amount for display
+  const displayAmount =
+    typeof amount === 'string'
+      ? amount
+      : formatUnits(amount, groupedPosition.loanAssetDecimals);
+
+  return (
+    <div className="flex items-center">
+      {/* Column 1: From → To Market Section - 50% */}
+      <div className="flex w-[50%] items-center gap-3">
+        {/* From Market */}
+        <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 ? '' : 'border-dashed opacity-60'
+            }`}
+          >
+            {fromMarket ? (
+              <MarketIdentity
+                market={fromMarket}
+                chainId={fromMarket.morphoBlue.chain.id}
+                mode={MarketIdentityMode.Badge}
+              />
+            ) : (
+              <span className="text-xs text-secondary">Select above...</span>
+            )}
+          </div>
+        </div>
+
+        <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="relative">
+            {mode === 'input' ? (
+              <>
+                <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"
+                >
+                  {toMarket ? (
+                    <MarketIdentity
+                      market={toMarket}
+                      chainId={toMarket.morphoBlue.chain.id}
+                      mode={MarketIdentityMode.Badge}
+                    />
+                  ) : (
+                    <span className="text-xs text-secondary">Click to select...</span>
+                  )}
+                </button>
+                {toMarket && 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 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>
+      </div>
+
+      {/* Column 2: APY & Utilization Preview - 25% */}
+      <div className="flex w-[25%] items-center gap-4 text-xs">
+        {/* Market APY */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] uppercase tracking-wide text-secondary whitespace-nowrap">APY</span>
+          {toMarket ? (
+            <ApyPreview
+              currentApy={toMarket.state.supplyApy}
+              previewApy={previewState?.supplyApy ?? null}
+            />
+          ) : (
+            <span className="inline-block min-w-[60px] whitespace-nowrap text-right text-sm text-foreground">--</span>
+          )}
+        </div>
+
+        {/* Utilization Rate */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10px] uppercase tracking-wide text-secondary whitespace-nowrap">Util</span>
+          {toMarket ? (
+            <UtilizationPreview
+              currentUtilization={toMarket.state.utilization}
+              previewUtilization={previewState?.utilization ?? null}
+            />
+          ) : (
+            <span className="inline-block min-w-[60px] whitespace-nowrap text-right text-sm text-foreground">--</span>
+          )}
+        </div>
+      </div>
+
+      {/* Column 3: Amount Input/Display + Button - 25% */}
+      <div className="flex w-[25%] items-center justify-end gap-2">
+        <div className="bg-hovered relative h-8 rounded-sm">
+          {mode === 'input' ? (
+            <>
+              <input
+                type="number"
+                value={displayAmount}
+                onChange={(e) => onAmountChange?.(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 className="flex h-full w-32 items-center justify-end px-2 pr-8">
+                <span className="text-right text-sm">{displayAmount}</span>
+              </div>
+              <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>
+
+        {mode === 'input' ? (
+          <Button
+            onPress={onAddAction}
+            variant="cta"
+            size="sm"
+            isDisabled={isAddDisabled}
+            className="h-8 w-[64px]"
+          >
+            Add
+          </Button>
+        ) : (
+          <button
+            type="button"
+            onClick={onRemoveAction}
+            className="flex h-8 w-[64px] items-center justify-center 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>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/positions/components/RebalanceCart.tsx b/app/positions/components/RebalanceCart.tsx
index b72c1c47..e9af233c 100644
--- a/app/positions/components/RebalanceCart.tsx
+++ b/app/positions/components/RebalanceCart.tsx
@@ -1,12 +1,7 @@
 import React from 'react';
-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';
+import { RebalanceActionRow } from './RebalanceActionRow';
 
 type RebalanceCartProps = {
   rebalanceActions: RebalanceAction[];
@@ -39,94 +34,19 @@ 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, undefined);
-          } catch {
-            apyPreview = null;
-          }
-        }
-
         return (
           <div
             key={index}
-            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"
+            className="rounded-sm border border-gray-200 bg-gray-50/50 p-3 dark:border-gray-700 dark:bg-gray-800/50"
           >
-            {/* 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>
-
-              <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="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>
-
-            {/* 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-semibold text-secondary/60">--</span>
-              )}
-            </div>
-
-            {/* 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>
+            <RebalanceActionRow
+              mode="display"
+              fromMarket={fromMarket}
+              toMarket={toMarket}
+              amount={action.amount}
+              groupedPosition={groupedPosition}
+              onRemoveAction={() => removeRebalanceAction(index)}
+            />
           </div>
         );
       })}
diff --git a/app/positions/components/RebalanceProcessModal.tsx b/app/positions/components/RebalanceProcessModal.tsx
index e2e88908..3a58166d 100644
--- a/app/positions/components/RebalanceProcessModal.tsx
+++ b/app/positions/components/RebalanceProcessModal.tsx
@@ -103,26 +103,24 @@ export function RebalanceProcessModal({
             return (
               <div
                 key={step.key}
-                className={`flex items-start gap-4 rounded border p-4 transition-colors ${
+                className={`flex items-start gap-3 rounded border p-3 transition-colors ${
                   status === 'current'
                     ? 'border-primary bg-primary/5'
-                    : 'border-gray-200 dark:border-gray-700'
+                    : 'border-gray-100 dark:border-gray-700'
                 }`}
               >
-                <div className="mt-1">
+                <div className="mt-0.5">
                   {status === 'done' ? (
-                    <FaCheckCircle className="text-lg text-primary" />
+                    <FaCheckCircle className="h-5 w-5 text-green-500" />
                   ) : status === 'current' ? (
-                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                    <FaCircle className="h-5 w-5 animate-pulse text-primary" />
                   ) : (
-                    <FaCircle className="text-gray-400" />
+                    <FaCircle className="h-5 w-5 text-gray-300 dark:text-gray-600" />
                   )}
                 </div>
-                <div className="flex flex-col">
-                  <div className="text-base font-medium">{step.label}</div>
-                  {status === 'current' && step.detail && (
-                    <div className="text-sm text-secondary">{step.detail}</div>
-                  )}
+                <div>
+                  <div className="font-medium">{step.label}</div>
+                  <div className="text-sm text-gray-500">{step.detail}</div>
                 </div>
               </div>
             );
diff --git a/app/positions/components/UtilizationPreview.tsx b/app/positions/components/UtilizationPreview.tsx
new file mode 100644
index 00000000..84c16444
--- /dev/null
+++ b/app/positions/components/UtilizationPreview.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { MetricPreview } from './MetricPreview';
+
+type UtilizationPreviewProps = {
+  currentUtilization: number;
+  previewUtilization?: number | null;
+};
+
+/**
+ * Utilization preview component.
+ * Thin wrapper around MetricPreview for utilization-specific usage.
+ */
+export function UtilizationPreview({ currentUtilization, previewUtilization }: UtilizationPreviewProps) {
+  return <MetricPreview currentValue={currentUtilization} previewValue={previewUtilization} label="Utilization" />;
+}