diff --git a/src/components/common/table-container-with-header.tsx b/src/components/common/table-container-with-header.tsx
index 60164e9a..31034cdf 100644
--- a/src/components/common/table-container-with-header.tsx
+++ b/src/components/common/table-container-with-header.tsx
@@ -36,7 +36,7 @@ export function TableContainerWithHeader({ title, actions, children, className =
         <h3 className="font-monospace text-xs uppercase text-secondary">{title}</h3>
         {actions && <div className="flex items-center gap-2">{actions}</div>}
       </div>
-      <div className="overflow-x-auto">{children}</div>
+      <div className="overflow-x-auto pb-4">{children}</div>
     </div>
   );
 }
diff --git a/src/features/autovault/components/vault-detail/allocations/allocations/collateral-view.tsx b/src/features/autovault/components/vault-detail/allocations/allocations/collateral-view.tsx
index d4c8651b..6ae303fa 100644
--- a/src/features/autovault/components/vault-detail/allocations/allocations/collateral-view.tsx
+++ b/src/features/autovault/components/vault-detail/allocations/allocations/collateral-view.tsx
@@ -52,7 +52,7 @@ export function CollateralView({ allocations, totalAllocation, vaultAssetSymbol,
                   <span className="text-sm whitespace-nowrap">{item.collateralSymbol}</span>
                 </div>
               </TableCell>
-              <TableCell className="p-3 rounded-r align-middle">
+              <TableCell className="p-3 rounded-r align-middle text-sm">
                 <AllocationCell
                   amount={allocatedAmount}
                   symbol={vaultAssetSymbol}
diff --git a/src/features/autovault/components/vault-detail/allocations/allocations/market-view.tsx b/src/features/autovault/components/vault-detail/allocations/allocations/market-view.tsx
index 15a86765..7c99696e 100644
--- a/src/features/autovault/components/vault-detail/allocations/allocations/market-view.tsx
+++ b/src/features/autovault/components/vault-detail/allocations/allocations/market-view.tsx
@@ -58,6 +58,7 @@ export function MarketView({ allocations, totalAllocation, vaultAssetSymbol, vau
               {/* Market Info Column */}
               <TableCell className="p-3 rounded-l">
                 <MarketIdentity
+                  showId
                   market={market}
                   chainId={chainId}
                   focus={MarketIdentityFocus.Collateral}
@@ -78,7 +79,7 @@ export function MarketView({ allocations, totalAllocation, vaultAssetSymbol, vau
               <TableCell className="p-3 text-right text-xs text-secondary whitespace-nowrap">{liquidity}</TableCell>
 
               {/* Allocation */}
-              <TableCell className="p-3 rounded-r align-middle">
+              <TableCell className="p-3 rounded-r align-middle text-sm">
                 <AllocationCell
                   amount={allocatedAmount}
                   symbol={vaultAssetSymbol}
diff --git a/src/features/autovault/vault-list-view.tsx b/src/features/autovault/vault-list-view.tsx
index 51f542e1..b254d594 100644
--- a/src/features/autovault/vault-list-view.tsx
+++ b/src/features/autovault/vault-list-view.tsx
@@ -1,12 +1,15 @@
 'use client';
 
 import { useState, useEffect, useMemo } from 'react';
-import { FaPlus } from 'react-icons/fa';
+import { GoPlusCircle } from 'react-icons/go';
 import { FiShield, FiZap, FiSettings } from 'react-icons/fi';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/navigation';
 import { useAppKit } from '@reown/appkit/react';
 import { useConnection } from 'wagmi';
 import { Button } from '@/components/ui/button';
+import { Avatar } from '@/components/Avatar/Avatar';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import Header from '@/components/layout/header/Header';
 import { fetchUserVaultV2AddressesAllNetworks } from '@/data-sources/subgraph/v2-vaults';
 import { getDeployedVaults } from '@/utils/vault-storage';
@@ -133,14 +136,18 @@ export default function AutovaultListContent() {
     return combined;
   }, [vaultAddresses, address]);
 
-  const handleManageVault = () => {
-    if (mergedVaultAddresses.length > 0) {
+  const handleManageVault = (vaultAddress?: string, networkId?: number) => {
+    if (vaultAddress && networkId) {
+      router.push(`/autovault/${networkId}/${vaultAddress}`);
+    } else if (mergedVaultAddresses.length > 0) {
       const firstVault = mergedVaultAddresses[0];
       router.push(`/autovault/${firstVault.networkId}/${firstVault.address}`);
     }
   };
 
   const hasVaults = mergedVaultAddresses.length > 0;
+  const hasSingleVault = mergedVaultAddresses.length === 1;
+  const hasMultipleVaults = mergedVaultAddresses.length > 1;
 
   return (
     <div className="flex w-full flex-col justify-between font-zen">
@@ -177,21 +184,64 @@ export default function AutovaultListContent() {
               {/* Actions for users with existing vaults */}
               {isConnected && hasVaults && (
                 <div className="flex items-center justify-center gap-3 pt-4">
-                  <Button
-                    variant="primary"
-                    size="lg"
-                    className="font-zen px-8"
-                    onClick={handleManageVault}
-                  >
-                    Manage Vault
-                  </Button>
+                  {/* Single vault - show avatar with address */}
+                  {hasSingleVault && (
+                    <Button
+                      variant="primary"
+                      size="lg"
+                      className="font-zen px-6"
+                      onClick={() => handleManageVault()}
+                    >
+                      <Avatar
+                        address={mergedVaultAddresses[0].address as `0x${string}`}
+                        size={20}
+                      />
+                      <span className="ml-2">Manage {mergedVaultAddresses[0].address.slice(0, 6)}</span>
+                    </Button>
+                  )}
+
+                  {/* Multiple vaults - show dropdown */}
+                  {hasMultipleVaults && (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="primary"
+                          size="lg"
+                          className="font-zen px-6"
+                        >
+                          <Avatar
+                            address={mergedVaultAddresses[0].address as `0x${string}`}
+                            size={20}
+                          />
+                          <span className="ml-2">Manage {mergedVaultAddresses[0].address.slice(0, 6)}</span>
+                          <ChevronDownIcon className="ml-2 h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="center">
+                        {mergedVaultAddresses.map((vault) => (
+                          <DropdownMenuItem
+                            key={`${vault.networkId}-${vault.address}`}
+                            onClick={() => handleManageVault(vault.address, vault.networkId)}
+                            className="cursor-pointer"
+                          >
+                            <Avatar
+                              address={vault.address as `0x${string}`}
+                              size={16}
+                            />
+                            <span className="ml-2">{vault.address.slice(0, 6)}</span>
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  )}
+
                   <Button
                     variant="default"
                     size="lg"
                     className="font-zen px-8"
                     onClick={handleCreateVault}
                   >
-                    <FaPlus
+                    <GoPlusCircle
                       size={16}
                       className="mr-2"
                     />
@@ -210,7 +260,7 @@ export default function AutovaultListContent() {
                       className="font-zen px-8"
                       onClick={handleCreateVault}
                     >
-                      <FaPlus
+                      <GoPlusCircle
                         size={16}
                         className="mr-2"
                       />
diff --git a/src/features/history/components/history-table.tsx b/src/features/history/components/history-table.tsx
index 532fcc4b..461617da 100644
--- a/src/features/history/components/history-table.tsx
+++ b/src/features/history/components/history-table.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import { ChevronDownIcon, TrashIcon, ReloadIcon, GearIcon } from '@radix-ui/react-icons';
-import { MdWarning } from 'react-icons/md';
+import { IoIosArrowRoundForward } from 'react-icons/io';
 import Image from 'next/image';
 import { formatUnits } from 'viem';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -22,9 +22,8 @@ import { TooltipContent } from '@/components/shared/tooltip-content';
 import { TokenIcon } from '@/components/shared/token-icon';
 import { TableContainerWithHeader } from '@/components/common/table-container-with-header';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal';
-import { MarketIdentity, MarketIdentityFocus } from '@/features/markets/components/market-identity';
+import { MarketIdentity, MarketIdentityFocus, MarketIdentityMode } from '@/features/markets/components/market-identity';
 import { RebalanceDetail } from './rebalance-detail';
-import { getTruncatedAssetName } from '@/utils/oracle';
 import { useMarkets } from '@/contexts/MarketsContext';
 import useUserTransactions from '@/hooks/useUserTransactions';
 import { useDisclosure } from '@/hooks/useDisclosure';
@@ -32,7 +31,7 @@ import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { useStyledToast } from '@/hooks/useStyledToast';
 import { formatReadable } from '@/utils/balance';
 import { getNetworkImg, getNetworkName } from '@/utils/networks';
-import { groupTransactionsByHash, type GroupedTransaction } from '@/utils/transactionGrouping';
+import { groupTransactionsByHash, getWithdrawals, getSupplies, type GroupedTransaction } from '@/utils/transactionGrouping';
 import { storageKeys } from '@/utils/storageKeys';
 import { UserTxTypes, type Market, type MarketPosition, type UserTransaction } from '@/utils/types';
 
@@ -114,6 +113,11 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
     [history],
   );
 
+  // Determine MarketIdentity mode based on context
+  // Use Badge mode when showing single loan asset context (vault adapter or filtered by asset)
+  // Use Normal mode with Collateral focus when showing all history
+  const shouldUseBadgeMode = isVaultAdapter || selectedAsset !== null;
+
   // Helper functions
   const toggleRow = (rowKey: string) => {
     setExpandedRows((prev) => {
@@ -274,24 +278,19 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
   const renderSkeletonRows = (count = 5) => {
     return Array.from({ length: count }).map((_, idx) => (
       <TableRow key={`skeleton-${idx}`}>
-        {!isVaultAdapter && (
-          <TableCell style={{ minWidth: '100px' }}>
-            <div className="flex items-center justify-center gap-1.5">
-              <div className="bg-hovered h-4 w-4 rounded-full animate-pulse" />
-              <div className="bg-hovered h-4 w-16 rounded animate-pulse" />
-            </div>
-          </TableCell>
-        )}
-        <TableCell style={{ minWidth: '140px' }}>
-          <div className="flex items-center justify-center gap-2">
-            <div className="bg-hovered h-4 w-24 rounded animate-pulse" />
+        {/* Action column */}
+        <TableCell style={{ minWidth: '100px' }}>
+          <div className="flex justify-start">
+            <div className="bg-hovered h-6 w-16 rounded animate-pulse" />
           </div>
         </TableCell>
-        <TableCell style={{ minWidth: '80px' }}>
-          <div className="flex justify-center">
-            <div className="bg-hovered h-6 w-16 rounded animate-pulse" />
+        {/* Market column */}
+        <TableCell style={{ minWidth: '200px' }}>
+          <div className="flex items-center justify-start gap-2">
+            <div className="bg-hovered h-4 w-32 rounded animate-pulse" />
           </div>
         </TableCell>
+        {/* Amount column */}
         <TableCell
           className="text-right"
           style={{ minWidth: '120px' }}
@@ -300,11 +299,13 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
             <div className="bg-hovered h-4 w-24 rounded animate-pulse" />
           </div>
         </TableCell>
+        {/* Tx Hash column */}
         <TableCell style={{ minWidth: '120px' }}>
           <div className="flex justify-center">
             <div className="bg-hovered h-4 w-20 rounded animate-pulse" />
           </div>
         </TableCell>
+        {/* Time column */}
         <TableCell
           className="text-right"
           style={{ minWidth: '90px' }}
@@ -332,80 +333,69 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
         key={`${tx.hash}-${index}`}
         className="hover:bg-hovered"
       >
-        {/* Loan Asset - only show if not vault adapter */}
-        {!isVaultAdapter && (
-          <TableCell
-            data-label="Loan Asset"
-            className="z-50"
-            style={{ minWidth: '100px' }}
+        {/* Action */}
+        <TableCell
+          data-label="Action"
+          className="z-10"
+          style={{ minWidth: '100px' }}
+        >
+          <span
+            className={`inline-flex items-center rounded bg-hovered px-2 py-1 text-xs ${
+              side === 'Supply' ? 'text-green-500' : 'text-red-500'
+            }`}
           >
-            <div className="flex items-center justify-center gap-1.5">
-              <TokenIcon
-                address={market.loanAsset.address}
-                chainId={market.morphoBlue.chain.id}
-                symbol={market.loanAsset.symbol}
-                width={16}
-                height={16}
-              />
-              <span className="text-sm whitespace-nowrap">{getTruncatedAssetName(market.loanAsset.symbol)}</span>
-            </div>
-          </TableCell>
-        )}
+            {side}
+          </span>
+        </TableCell>
 
         {/* Market */}
         <TableCell
           data-label="Market"
-          className="z-50"
-          style={{ minWidth: '140px' }}
+          className="z-10"
+          style={{ minWidth: '200px' }}
         >
           <Link
             href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}
             className="no-underline hover:no-underline"
           >
-            <div className="flex items-center justify-center gap-2">
+            <div className="flex items-center justify-start gap-2">
               <MarketIdentity
                 market={market}
                 chainId={market.morphoBlue.chain.id}
+                mode={shouldUseBadgeMode ? MarketIdentityMode.Badge : MarketIdentityMode.Normal}
+                focus={MarketIdentityFocus.Collateral}
                 showOracle={false}
-                showLltv
-                focus={isVaultAdapter ? MarketIdentityFocus.Collateral : MarketIdentityFocus.Collateral}
+                showLltv={!shouldUseBadgeMode}
               />
             </div>
           </Link>
         </TableCell>
 
-        {/* Side */}
-        <TableCell
-          data-label="Side"
-          className="z-50 text-center"
-          style={{ minWidth: '80px' }}
-        >
-          <span
-            className={`inline-flex items-center rounded bg-hovered px-2 py-1 text-xs ${
-              side === 'Supply' ? 'text-green-500' : 'text-red-500'
-            }`}
-          >
-            {side}
-          </span>
-        </TableCell>
-
         {/* Amount */}
         <TableCell
           data-label="Amount"
-          className="z-50 text-right"
+          className="z-10 text-right"
           style={{ minWidth: '120px' }}
         >
-          <span className="text-sm">
-            {sign}
-            {formatReadable(Number(formatUnits(BigInt(tx.data.assets), market.loanAsset.decimals)))}{' '}
-            {getTruncatedAssetName(market.loanAsset.symbol)}
-          </span>
+          <div className="flex items-center justify-end gap-1.5 text-sm">
+            <span>
+              {sign}
+              {formatReadable(Number(formatUnits(BigInt(tx.data.assets), market.loanAsset.decimals)))}
+            </span>
+            <TokenIcon
+              address={market.loanAsset.address}
+              chainId={market.morphoBlue.chain.id}
+              symbol={market.loanAsset.symbol}
+              width={16}
+              height={16}
+            />
+          </div>
         </TableCell>
 
         {/* Transaction Hash */}
         <TableCell
           data-label="Tx Hash"
-          className="z-50"
+          className="z-10"
           style={{ minWidth: '120px' }}
         >
           <div className="flex justify-center">
@@ -419,7 +409,7 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
         {/* Time */}
         <TableCell
           data-label="Time"
-          className="z-50 text-right"
+          className="z-10 text-right"
           style={{ minWidth: '90px' }}
         >
           <span className="text-xs text-secondary whitespace-nowrap">{formatTimeAgo(tx.timestamp)}</span>
@@ -455,17 +445,18 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
         content={
           <TooltipContent
             title="Settings"
-            detail="Configure view settings"
+            detail={isGroupedView ? 'Configure view settings • Grouped view active' : 'Configure view settings'}
           />
         }
       >
         <Button
           variant="ghost"
           size="sm"
-          className="text-secondary min-w-0 px-2"
+          className="text-secondary min-w-0 px-2 relative"
           onClick={onSettingsOpen}
         >
           <GearIcon className="h-3 w-3" />
+          {isGroupedView && <span className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-primary" />}
         </Button>
       </Tooltip>
     </>
@@ -480,7 +471,7 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
       )}
       {!isVaultAdapter && (
         <div
-          className="relative w-fit max-w-md z-50"
+          className="relative w-fit max-w-md z-10"
           ref={dropdownRef}
         >
           <div
@@ -610,20 +601,6 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
         </div>
       )}
 
-      {isGroupedView && (
-        <div className="rounded bg-yellow-50 dark:bg-yellow-900/20 p-4">
-          <div className="flex items-start gap-2">
-            <MdWarning
-              size={18}
-              className="text-yellow-700 dark:text-yellow-300 flex-shrink-0 mt-0.5"
-            />
-            <p className="text-sm text-yellow-700 dark:text-yellow-300">
-              Grouped view may show incomplete groups near page boundaries. Increase entries per page for more accurate grouping.
-            </p>
-          </div>
-        </div>
-      )}
-
       <TableContainerWithHeader
         title="Transaction History"
         actions={headerActions}
@@ -631,40 +608,32 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
         <Table>
           <TableHeader>
             <TableRow className="text-secondary">
-              {!isVaultAdapter && (
-                <TableHead
-                  className="z-50 text-center"
-                  style={{ minWidth: '100px' }}
-                >
-                  Loan Asset
-                </TableHead>
-              )}
               <TableHead
-                className="z-50 text-center"
-                style={{ minWidth: '140px' }}
+                className="z-10 text-left"
+                style={{ minWidth: '100px' }}
               >
-                Market
+                Action
               </TableHead>
               <TableHead
-                className="z-50 text-center"
-                style={{ minWidth: '80px' }}
+                className="z-10 text-left"
+                style={{ minWidth: '200px' }}
               >
-                Side
+                Market
               </TableHead>
               <TableHead
-                className="z-50 text-right"
+                className="z-10 text-right"
                 style={{ minWidth: '120px' }}
               >
                 Amount
               </TableHead>
               <TableHead
-                className="z-50 text-center"
+                className="z-10 text-center"
                 style={{ minWidth: '120px' }}
               >
                 Tx Hash
               </TableHead>
               <TableHead
-                className="z-50 text-right"
+                className="z-10 text-right"
                 style={{ minWidth: '90px' }}
               >
                 Time
@@ -677,7 +646,7 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
             ) : (isGroupedView ? groupedHistory : ungroupedHistory).length === 0 ? (
               <TableRow>
                 <TableCell
-                  colSpan={isVaultAdapter ? 5 : 6}
+                  colSpan={5}
                   className="text-center text-gray-400"
                 >
                   No transactions found
@@ -687,8 +656,21 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
               (isGroupedView ? groupedHistory : ungroupedHistory).map((group, index) => {
                 // Handle rebalances (expandable)
                 if (isGroupedView && group.isMetaAction && group.metaActionType === 'rebalance') {
-                  const firstTx = group.transactions[0];
-                  const market = allMarkets.find((m) => m.uniqueKey === firstTx.data.market.uniqueKey) as Market | undefined;
+                  const withdrawals = getWithdrawals(group.transactions);
+                  const supplies = getSupplies(group.transactions);
+                  const firstWithdrawal = withdrawals[0];
+                  const firstSupply = supplies[0];
+                  const fromMarket = firstWithdrawal
+                    ? (allMarkets.find((m) => m.uniqueKey === firstWithdrawal.data.market.uniqueKey) as Market | undefined)
+                    : undefined;
+                  const toMarket = firstSupply
+                    ? (allMarkets.find((m) => m.uniqueKey === firstSupply.data.market.uniqueKey) as Market | undefined)
+                    : undefined;
+                  const market = fromMarket ?? toMarket;
+                  const loanAssetDecimals = fromMarket?.loanAsset.decimals ?? toMarket?.loanAsset.decimals ?? 18;
+                  const _loanAssetSymbol = fromMarket?.loanAsset.symbol ?? toMarket?.loanAsset.symbol ?? '';
+                  const hasMoreWithdrawals = withdrawals.length > 1;
+                  const hasMoreSupplies = supplies.length > 1;
                   const rowKey = `rebalance-${group.hash}`;
                   const isExpanded = expandedRows.has(rowKey);
 
@@ -698,59 +680,75 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                         className="cursor-pointer hover:bg-hovered"
                         onClick={() => toggleRow(rowKey)}
                       >
-                        {/* Loan Asset - only show if not vault adapter */}
-                        {!isVaultAdapter && (
-                          <TableCell
-                            data-label="Loan Asset"
-                            className="z-50"
-                            style={{ minWidth: '100px' }}
-                          >
-                            <div className="flex items-center justify-center gap-1.5">
-                              {market && (
-                                <>
-                                  <TokenIcon
-                                    address={market.loanAsset.address}
-                                    chainId={market.morphoBlue.chain.id}
-                                    symbol={market.loanAsset.symbol}
-                                    width={16}
-                                    height={16}
-                                  />
-                                  <span className="text-sm whitespace-nowrap">{getTruncatedAssetName(market.loanAsset.symbol)}</span>
-                                </>
-                              )}
-                            </div>
-                          </TableCell>
-                        )}
-
-                        {/* Market - show count of markets */}
+                        {/* Action - Rebalance badge */}
                         <TableCell
-                          data-label="Market"
-                          className="z-50 text-center"
-                          style={{ minWidth: '140px' }}
+                          data-label="Action"
+                          className="z-10"
+                          style={{ minWidth: '100px' }}
                         >
-                          <span className="text-sm text-secondary">{group.transactions.length} markets</span>
+                          <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-primary whitespace-nowrap">
+                            Rebalance
+                          </span>
                         </TableCell>
 
-                        {/* Side - Rebalance badge */}
+                        {/* Market - show from -> to markets, left-aligned */}
                         <TableCell
-                          data-label="Side"
-                          className="z-50 text-center"
-                          style={{ minWidth: '80px' }}
+                          data-label="Market"
+                          className="z-10"
+                          style={{ minWidth: '200px' }}
                         >
-                          <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-primary">Rebalance</span>
+                          <div className="flex items-center justify-start gap-1.5 text-xs">
+                            {fromMarket ? (
+                              <div className="flex items-center gap-1">
+                                <MarketIdentity
+                                  market={fromMarket}
+                                  chainId={market?.morphoBlue.chain.id ?? 1}
+                                  mode={shouldUseBadgeMode ? MarketIdentityMode.Badge : MarketIdentityMode.Normal}
+                                  focus={MarketIdentityFocus.Collateral}
+                                  showOracle={false}
+                                  showLltv={!shouldUseBadgeMode}
+                                />
+                                {hasMoreWithdrawals && <span className="text-secondary text-[10px]">+{withdrawals.length - 1}</span>}
+                              </div>
+                            ) : (
+                              <span className="text-secondary">From</span>
+                            )}
+                            <IoIosArrowRoundForward className="h-4 w-4 text-secondary flex-shrink-0" />
+                            {toMarket ? (
+                              <div className="flex items-center gap-1">
+                                <MarketIdentity
+                                  market={toMarket}
+                                  chainId={market?.morphoBlue.chain.id ?? 1}
+                                  mode={shouldUseBadgeMode ? MarketIdentityMode.Badge : MarketIdentityMode.Normal}
+                                  focus={MarketIdentityFocus.Collateral}
+                                  showOracle={false}
+                                  showLltv={!shouldUseBadgeMode}
+                                />
+                                {hasMoreSupplies && <span className="text-secondary text-[10px]">+{supplies.length - 1}</span>}
+                              </div>
+                            ) : (
+                              <span className="text-secondary">To</span>
+                            )}
+                          </div>
                         </TableCell>
 
                         {/* Amount - show rebalance amount */}
                         <TableCell
                           data-label="Amount"
-                          className="z-50 text-right"
+                          className="z-10 text-right"
                           style={{ minWidth: '120px' }}
                         >
                           {group.amount && market ? (
-                            <span className="text-sm">
-                              {formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))}{' '}
-                              {getTruncatedAssetName(market.loanAsset.symbol)}
-                            </span>
+                            <div className="flex items-center justify-end gap-1.5 text-sm">
+                              <span>{formatReadable(Number(formatUnits(group.amount, loanAssetDecimals)))}</span>
+                              <TokenIcon
+                                address={market.loanAsset.address}
+                                chainId={market.morphoBlue.chain.id}
+                                symbol={market.loanAsset.symbol}
+                                width={16}
+                                height={16}
+                              />
+                            </div>
                           ) : (
                             <span className="text-sm text-secondary">{group.transactions.length} actions</span>
                           )}
@@ -759,7 +757,7 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                         {/* Transaction Hash */}
                         <TableCell
                           data-label="Tx Hash"
-                          className="z-50"
+                          className="z-10"
                           style={{ minWidth: '120px' }}
                         >
                           <div className="flex justify-center">
@@ -773,7 +771,7 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                         {/* Time */}
                         <TableCell
                           data-label="Time"
-                          className="z-50 text-right"
+                          className="z-10 text-right"
                           style={{ minWidth: '90px' }}
                         >
                           <span className="text-xs text-secondary whitespace-nowrap">{formatTimeAgo(group.timestamp)}</span>
@@ -785,7 +783,7 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                         {isExpanded && (
                           <TableRow className="bg-surface [&:hover]:border-transparent [&:hover]:bg-surface">
                             <TableCell
-                              colSpan={isVaultAdapter ? 5 : 6}
+                              colSpan={5}
                               className="bg-surface"
                             >
                               <motion.div
@@ -810,58 +808,73 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                   const firstTx = group.transactions[0];
                   const market = allMarkets.find((m) => m.uniqueKey === firstTx.data.market.uniqueKey) as Market | undefined;
                   const marketCount = new Set(group.transactions.map((t) => t.data.market.uniqueKey)).size;
+                  const hasMoreMarkets = marketCount > 1;
 
                   return (
                     <TableRow
                       key={group.hash}
                       className="hover:bg-hovered"
                     >
-                      {!isVaultAdapter && market && (
-                        <TableCell
-                          className="z-50"
-                          style={{ minWidth: '100px' }}
-                        >
-                          <div className="flex items-center justify-center gap-1.5">
-                            <TokenIcon
-                              address={market.loanAsset.address}
-                              chainId={market.morphoBlue.chain.id}
-                              symbol={market.loanAsset.symbol}
-                              width={16}
-                              height={16}
-                            />
-                            <span className="text-sm whitespace-nowrap">{getTruncatedAssetName(market.loanAsset.symbol)}</span>
-                          </div>
-                        </TableCell>
-                      )}
+                      {/* Action - Deposits badge */}
                       <TableCell
-                        className="z-50 text-center"
-                        style={{ minWidth: '140px' }}
+                        data-label="Action"
+                        className="z-10"
+                        style={{ minWidth: '100px' }}
                       >
-                        <span className="text-sm text-secondary">
-                          {marketCount} {marketCount === 1 ? 'market' : 'markets'}
+                        <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-green-500 whitespace-nowrap">
+                          Deposits
                         </span>
                       </TableCell>
+
+                      {/* Market - show market identity, left-aligned */}
                       <TableCell
-                        className="z-50 text-center"
-                        style={{ minWidth: '80px' }}
+                        data-label="Market"
+                        className="z-10"
+                        style={{ minWidth: '200px' }}
                       >
-                        <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-green-500">Deposits</span>
+                        <div className="flex items-center justify-start gap-1">
+                          {market && (
+                            <>
+                              <MarketIdentity
+                                market={market}
+                                chainId={market.morphoBlue.chain.id}
+                                mode={shouldUseBadgeMode ? MarketIdentityMode.Badge : MarketIdentityMode.Normal}
+                                focus={MarketIdentityFocus.Collateral}
+                                showOracle={false}
+                                showLltv={!shouldUseBadgeMode}
+                              />
+                              {hasMoreMarkets && <span className="text-secondary text-[10px]">+{marketCount - 1} more</span>}
+                            </>
+                          )}
+                        </div>
                       </TableCell>
+
+                      {/* Amount */}
                       <TableCell
-                        className="z-50 text-right"
+                        data-label="Amount"
+                        className="z-10 text-right"
                         style={{ minWidth: '120px' }}
                       >
                         {group.amount && market ? (
-                          <span className="text-sm">
-                            +{formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))}{' '}
-                            {getTruncatedAssetName(market.loanAsset.symbol)}
-                          </span>
+                          <div className="flex items-center justify-end gap-1.5 text-sm">
+                            <span>+{formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))}</span>
+                            <TokenIcon
+                              address={market.loanAsset.address}
+                              chainId={market.morphoBlue.chain.id}
+                              symbol={market.loanAsset.symbol}
+                              width={16}
+                              height={16}
+                            />
+                          </div>
                         ) : (
                           <span className="text-sm text-secondary">{group.transactions.length} actions</span>
                         )}
                       </TableCell>
+
+                      {/* Transaction Hash */}
                       <TableCell
-                        className="z-50"
+                        data-label="Tx Hash"
+                        className="z-10"
                         style={{ minWidth: '120px' }}
                       >
                         <div className="flex justify-center">
@@ -871,8 +884,11 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                           />
                         </div>
                       </TableCell>
+
+                      {/* Time */}
                       <TableCell
-                        className="z-50 text-right"
+                        data-label="Time"
+                        className="z-10 text-right"
                         style={{ minWidth: '90px' }}
                       >
                         <span className="text-xs text-secondary whitespace-nowrap">{formatTimeAgo(group.timestamp)}</span>
@@ -886,58 +902,73 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                   const firstTx = group.transactions[0];
                   const market = allMarkets.find((m) => m.uniqueKey === firstTx.data.market.uniqueKey) as Market | undefined;
                   const marketCount = new Set(group.transactions.map((t) => t.data.market.uniqueKey)).size;
+                  const hasMoreMarkets = marketCount > 1;
 
                   return (
                     <TableRow
                       key={group.hash}
                       className="hover:bg-hovered"
                     >
-                      {!isVaultAdapter && market && (
-                        <TableCell
-                          className="z-50"
-                          style={{ minWidth: '100px' }}
-                        >
-                          <div className="flex items-center justify-center gap-1.5">
-                            <TokenIcon
-                              address={market.loanAsset.address}
-                              chainId={market.morphoBlue.chain.id}
-                              symbol={market.loanAsset.symbol}
-                              width={16}
-                              height={16}
-                            />
-                            <span className="text-sm whitespace-nowrap">{getTruncatedAssetName(market.loanAsset.symbol)}</span>
-                          </div>
-                        </TableCell>
-                      )}
+                      {/* Action - Withdrawals badge */}
                       <TableCell
-                        className="z-50 text-center"
-                        style={{ minWidth: '140px' }}
+                        data-label="Action"
+                        className="z-10"
+                        style={{ minWidth: '100px' }}
                       >
-                        <span className="text-sm text-secondary">
-                          {marketCount} {marketCount === 1 ? 'market' : 'markets'}
+                        <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-red-500 whitespace-nowrap">
+                          Withdrawals
                         </span>
                       </TableCell>
+
+                      {/* Market - show market identity, left-aligned */}
                       <TableCell
-                        className="z-50 text-center"
-                        style={{ minWidth: '80px' }}
+                        data-label="Market"
+                        className="z-10"
+                        style={{ minWidth: '200px' }}
                       >
-                        <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-red-500">Withdrawals</span>
+                        <div className="flex items-center justify-start gap-1">
+                          {market && (
+                            <>
+                              <MarketIdentity
+                                market={market}
+                                chainId={market.morphoBlue.chain.id}
+                                mode={shouldUseBadgeMode ? MarketIdentityMode.Badge : MarketIdentityMode.Normal}
+                                focus={MarketIdentityFocus.Collateral}
+                                showOracle={false}
+                                showLltv={!shouldUseBadgeMode}
+                              />
+                              {hasMoreMarkets && <span className="text-secondary text-[10px]">+{marketCount - 1} more</span>}
+                            </>
+                          )}
+                        </div>
                       </TableCell>
+
+                      {/* Amount */}
                       <TableCell
-                        className="z-50 text-right"
+                        data-label="Amount"
+                        className="z-10 text-right"
                         style={{ minWidth: '120px' }}
                       >
                         {group.amount && market ? (
-                          <span className="text-sm">
-                            -{formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))}{' '}
-                            {getTruncatedAssetName(market.loanAsset.symbol)}
-                          </span>
+                          <div className="flex items-center justify-end gap-1.5 text-sm">
+                            <span>-{formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))}</span>
+                            <TokenIcon
+                              address={market.loanAsset.address}
+                              chainId={market.morphoBlue.chain.id}
+                              symbol={market.loanAsset.symbol}
+                              width={16}
+                              height={16}
+                            />
+                          </div>
                         ) : (
                           <span className="text-sm text-secondary">{group.transactions.length} actions</span>
                         )}
                       </TableCell>
+
+                      {/* Transaction Hash */}
                       <TableCell
-                        className="z-50"
+                        data-label="Tx Hash"
+                        className="z-10"
                         style={{ minWidth: '120px' }}
                       >
                         <div className="flex justify-center">
@@ -947,8 +978,11 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                           />
                         </div>
                       </TableCell>
+
+                      {/* Time */}
                       <TableCell
-                        className="z-50 text-right"
+                        data-label="Time"
+                        className="z-10 text-right"
                         style={{ minWidth: '90px' }}
                       >
                         <span className="text-xs text-secondary whitespace-nowrap">{formatTimeAgo(group.timestamp)}</span>
@@ -973,6 +1007,7 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
             pageSize={pageSize}
             onPageChange={setCurrentPage}
             isLoading={loading}
+            showEntryCount={false}
           />
         )}
       </TableContainerWithHeader>
@@ -1012,6 +1047,14 @@ export function HistoryTable({ account, positions, isVaultAdapter = false }: His
                     size="xs"
                   />
                 </FilterRow>
+                {isGroupedView && (
+                  <div className="mt-3 rounded bg-yellow-50 dark:bg-yellow-900/20 p-3">
+                    <p className="text-xs text-yellow-700 dark:text-yellow-300">
+                      Note: Grouped view may show incomplete groups near page boundaries. Increase entries per page for more accurate
+                      grouping.
+                    </p>
+                  </div>
+                )}
               </FilterSection>
 
               <Divider />
diff --git a/src/features/history/components/transaction-history-preview.tsx b/src/features/history/components/transaction-history-preview.tsx
index d4321852..4f76735d 100644
--- a/src/features/history/components/transaction-history-preview.tsx
+++ b/src/features/history/components/transaction-history-preview.tsx
@@ -3,13 +3,16 @@
 import { useEffect, useState, useMemo } from 'react';
 import Link from 'next/link';
 import { formatUnits } from 'viem';
+import { motion } from 'framer-motion';
+import { IoIosArrowRoundForward } from 'react-icons/io';
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import { TransactionIdentity } from '@/components/shared/transaction-identity';
 import { TableContainerWithDescription } from '@/components/common/table-container-with-header';
+import { MarketIdentity, MarketIdentityMode } from '@/features/markets/components/market-identity';
 import { useMarkets } from '@/contexts/MarketsContext';
 import useUserTransactions from '@/hooks/useUserTransactions';
 import { formatReadable } from '@/utils/balance';
-import { groupTransactionsByHash } from '@/utils/transactionGrouping';
+import { groupTransactionsByHash, getWithdrawals, getSupplies } from '@/utils/transactionGrouping';
 import { getTruncatedAssetName } from '@/utils/oracle';
 import type { Market } from '@/utils/types';
 
@@ -54,6 +57,7 @@ export function TransactionHistoryPreview({
   const { loading, fetchTransactions } = useUserTransactions();
   const [history, setHistory] = useState<ReturnType<typeof groupTransactionsByHash>>([]);
   const [isInitialized, setIsInitialized] = useState(false);
+  const [isViewAllHovered, setIsViewAllHovered] = useState(false);
   const { allMarkets } = useMarkets();
 
   useEffect(() => {
@@ -87,9 +91,26 @@ export function TransactionHistoryPreview({
   const actions = (
     <Link
       href={historyLink}
-      className="text-xs text-secondary hover:text-primary no-underline"
+      className="text-xs text-secondary hover:text-primary no-underline inline-flex items-center gap-1"
+      onMouseEnter={() => setIsViewAllHovered(true)}
+      onMouseLeave={() => setIsViewAllHovered(false)}
     >
-      View All
+      <motion.span
+        animate={{ x: isViewAllHovered ? -2 : 0 }}
+        transition={{ duration: 0.2 }}
+      >
+        View All
+      </motion.span>
+      <motion.span
+        initial={{ opacity: 0, x: -4 }}
+        animate={{
+          opacity: isViewAllHovered ? 1 : 0,
+          x: isViewAllHovered ? 0 : -4,
+        }}
+        transition={{ duration: 0.2 }}
+      >
+        <IoIosArrowRoundForward className="h-4 w-4" />
+      </motion.span>
     </Link>
   );
 
@@ -145,15 +166,71 @@ export function TransactionHistoryPreview({
 
               // Handle rebalances
               if (group.isMetaAction && group.metaActionType === 'rebalance') {
+                const withdrawals = getWithdrawals(group.transactions);
+                const supplies = getSupplies(group.transactions);
+                const firstWithdrawal = withdrawals[0];
+                const firstSupply = supplies[0];
+                const fromMarket = firstWithdrawal
+                  ? (allMarkets.find((m) => m.uniqueKey === firstWithdrawal.data.market.uniqueKey) as Market | undefined)
+                  : undefined;
+                const toMarket = firstSupply
+                  ? (allMarkets.find((m) => m.uniqueKey === firstSupply.data.market.uniqueKey) as Market | undefined)
+                  : undefined;
+                const loanAssetDecimals = fromMarket?.loanAsset.decimals ?? toMarket?.loanAsset.decimals ?? 18;
+                const loanAssetSymbol = fromMarket?.loanAsset.symbol ?? toMarket?.loanAsset.symbol ?? '';
+                const hasMoreWithdrawals = withdrawals.length > 1;
+                const hasMoreSupplies = supplies.length > 1;
+
                 return (
                   <TableRow
                     key={group.hash}
                     className="rounded bg-hovered/20"
                   >
                     <TableCell className="p-3 rounded-l">
-                      <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-primary">Rebalance</span>
+                      <div className="flex items-center gap-2">
+                        <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-primary whitespace-nowrap">
+                          Rebalance
+                        </span>
+                        <div className="flex items-center gap-1.5 text-xs">
+                          {fromMarket ? (
+                            <div className="flex items-center gap-1">
+                              <MarketIdentity
+                                market={fromMarket}
+                                chainId={chainIdForTx ?? 1}
+                                mode={MarketIdentityMode.Badge}
+                                showLltv={false}
+                              />
+                              {hasMoreWithdrawals && <span className="text-secondary text-[10px]">+{withdrawals.length - 1}</span>}
+                            </div>
+                          ) : (
+                            <span className="text-secondary">From</span>
+                          )}
+                          <IoIosArrowRoundForward className="h-4 w-4 text-secondary flex-shrink-0" />
+                          {toMarket ? (
+                            <div className="flex items-center gap-1">
+                              <MarketIdentity
+                                market={toMarket}
+                                chainId={chainIdForTx ?? 1}
+                                mode={MarketIdentityMode.Badge}
+                                showLltv={false}
+                              />
+                              {hasMoreSupplies && <span className="text-secondary text-[10px]">+{supplies.length - 1}</span>}
+                            </div>
+                          ) : (
+                            <span className="text-secondary">To</span>
+                          )}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="p-3 text-right text-xs">
+                      {group.amount ? (
+                        <span className="text-primary">
+                          {formatReadable(Number(formatUnits(group.amount, loanAssetDecimals)))} {getTruncatedAssetName(loanAssetSymbol)}
+                        </span>
+                      ) : (
+                        <span className="text-secondary">{group.transactions.length} actions</span>
+                      )}
                     </TableCell>
-                    <TableCell className="p-3 text-right text-xs text-secondary">{group.transactions.length} actions</TableCell>
                     <TableCell className="p-3 text-center">
                       <TransactionIdentity
                         txHash={group.hash}
@@ -169,6 +246,8 @@ export function TransactionHistoryPreview({
               if (group.isMetaAction && group.metaActionType === 'deposits') {
                 const firstTx = group.transactions[0];
                 const market = allMarkets.find((m) => m.uniqueKey === firstTx.data.market.uniqueKey) as Market | undefined;
+                const marketCount = new Set(group.transactions.map((t) => t.data.market.uniqueKey)).size;
+                const hasMoreMarkets = marketCount > 1;
 
                 return (
                   <TableRow
@@ -176,14 +255,32 @@ export function TransactionHistoryPreview({
                     className="rounded bg-hovered/20"
                   >
                     <TableCell className="p-3 rounded-l">
-                      <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-green-500">
-                        Deposits ({group.transactions.length})
-                      </span>
+                      <div className="flex items-center gap-2">
+                        <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-green-500 whitespace-nowrap">
+                          Deposits
+                        </span>
+                        {market && (
+                          <div className="flex items-center gap-1">
+                            <MarketIdentity
+                              market={market}
+                              chainId={chainIdForTx ?? 1}
+                              mode={MarketIdentityMode.Badge}
+                              showLltv={false}
+                            />
+                            {hasMoreMarkets && <span className="text-secondary text-[10px]">+{marketCount - 1} more</span>}
+                          </div>
+                        )}
+                      </div>
                     </TableCell>
-                    <TableCell className="p-3 text-right text-xs text-secondary whitespace-nowrap">
-                      {group.amount && market
-                        ? `+${formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))} ${getTruncatedAssetName(market.loanAsset.symbol)}`
-                        : `${group.transactions.length} actions`}
+                    <TableCell className="p-3 text-right text-xs whitespace-nowrap">
+                      {group.amount && market ? (
+                        <span className="text-green-500">
+                          +{formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))}{' '}
+                          {getTruncatedAssetName(market.loanAsset.symbol)}
+                        </span>
+                      ) : (
+                        <span className="text-secondary">{group.transactions.length} actions</span>
+                      )}
                     </TableCell>
                     <TableCell className="p-3 text-center">
                       <TransactionIdentity
@@ -200,6 +297,8 @@ export function TransactionHistoryPreview({
               if (group.isMetaAction && group.metaActionType === 'withdrawals') {
                 const firstTx = group.transactions[0];
                 const market = allMarkets.find((m) => m.uniqueKey === firstTx.data.market.uniqueKey) as Market | undefined;
+                const marketCount = new Set(group.transactions.map((t) => t.data.market.uniqueKey)).size;
+                const hasMoreMarkets = marketCount > 1;
 
                 return (
                   <TableRow
@@ -207,14 +306,32 @@ export function TransactionHistoryPreview({
                     className="rounded bg-hovered/20"
                   >
                     <TableCell className="p-3 rounded-l">
-                      <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-red-500">
-                        Withdrawals ({group.transactions.length})
-                      </span>
+                      <div className="flex items-center gap-2">
+                        <span className="inline-flex items-center rounded bg-hovered px-2 py-1 text-xs text-red-500 whitespace-nowrap">
+                          Withdrawals
+                        </span>
+                        {market && (
+                          <div className="flex items-center gap-1">
+                            <MarketIdentity
+                              market={market}
+                              chainId={chainIdForTx ?? 1}
+                              mode={MarketIdentityMode.Badge}
+                              showLltv={false}
+                            />
+                            {hasMoreMarkets && <span className="text-secondary text-[10px]">+{marketCount - 1} more</span>}
+                          </div>
+                        )}
+                      </div>
                     </TableCell>
-                    <TableCell className="p-3 text-right text-xs text-secondary whitespace-nowrap">
-                      {group.amount && market
-                        ? `-${formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))} ${getTruncatedAssetName(market.loanAsset.symbol)}`
-                        : `${group.transactions.length} actions`}
+                    <TableCell className="p-3 text-right text-xs whitespace-nowrap">
+                      {group.amount && market ? (
+                        <span className="text-red-500">
+                          -{formatReadable(Number(formatUnits(group.amount, market.loanAsset.decimals)))}{' '}
+                          {getTruncatedAssetName(market.loanAsset.symbol)}
+                        </span>
+                      ) : (
+                        <span className="text-secondary">{group.transactions.length} actions</span>
+                      )}
                     </TableCell>
                     <TableCell className="p-3 text-center">
                       <TransactionIdentity
diff --git a/src/features/history/history-view.tsx b/src/features/history/history-view.tsx
index 09bbe30d..9bb5c4b1 100644
--- a/src/features/history/history-view.tsx
+++ b/src/features/history/history-view.tsx
@@ -13,7 +13,7 @@ export default function HistoryContent({ account }: { account: string }) {
   return (
     <div className="flex flex-col justify-between font-zen">
       <Header />
-      <div className="container gap-8 px-[4%]">
+      <div className="container gap-8 px-[4%] pb-20">
         <h1 className="py-4 font-zen text-2xl">Transaction History</h1>
 
         <div className="mt-4">
diff --git a/src/features/markets/components/market-identity.tsx b/src/features/markets/components/market-identity.tsx
index 81ac2744..c23b4df3 100644
--- a/src/features/markets/components/market-identity.tsx
+++ b/src/features/markets/components/market-identity.tsx
@@ -77,32 +77,65 @@ export function MarketIdentity({
 
   const tokenStack = (
     <div className="flex items-center flex-shrink-0">
-      <div className={`${focus === MarketIdentityFocus.Loan ? 'z-10' : 'z-0'}`}>
-        <TokenIcon
-          address={market.loanAsset.address}
-          chainId={chainId}
-          symbol={market.loanAsset.symbol}
-          width={iconSize}
-          height={iconSize}
-          customTooltipTitle={market.loanAsset.symbol}
-          customTooltipDetail="Loan Asset in this market"
-          showExplorerLink={showExplorerLink}
-        />
-      </div>
-      {collateralAsset ? (
-        <div className={`${focus === MarketIdentityFocus.Collateral ? 'z-10' : 'z-0'} -ml-1`}>
-          <TokenIcon
-            address={collateralAsset.address}
-            chainId={chainId}
-            symbol={collateralAsset.symbol}
-            width={iconSize}
-            height={iconSize}
-            customTooltipTitle={collateralAsset.symbol}
-            customTooltipDetail="Collateral Asset in this market"
-            showExplorerLink={showExplorerLink}
-          />
-        </div>
-      ) : null}
+      {focus === MarketIdentityFocus.Loan ? (
+        <>
+          {collateralAsset && (
+            <div>
+              <TokenIcon
+                address={collateralAsset.address}
+                chainId={chainId}
+                symbol={collateralAsset.symbol}
+                width={iconSize}
+                height={iconSize}
+                customTooltipTitle={collateralAsset.symbol}
+                customTooltipDetail="Collateral Asset in this market"
+                showExplorerLink={showExplorerLink}
+              />
+            </div>
+          )}
+          <div className={collateralAsset ? '-ml-1' : ''}>
+            <TokenIcon
+              address={market.loanAsset.address}
+              chainId={chainId}
+              symbol={market.loanAsset.symbol}
+              width={iconSize}
+              height={iconSize}
+              customTooltipTitle={market.loanAsset.symbol}
+              customTooltipDetail="Loan Asset in this market"
+              showExplorerLink={showExplorerLink}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <div>
+            <TokenIcon
+              address={market.loanAsset.address}
+              chainId={chainId}
+              symbol={market.loanAsset.symbol}
+              width={iconSize}
+              height={iconSize}
+              customTooltipTitle={market.loanAsset.symbol}
+              customTooltipDetail="Loan Asset in this market"
+              showExplorerLink={showExplorerLink}
+            />
+          </div>
+          {collateralAsset && (
+            <div className="-ml-1">
+              <TokenIcon
+                address={collateralAsset.address}
+                chainId={chainId}
+                symbol={collateralAsset.symbol}
+                width={iconSize}
+                height={iconSize}
+                customTooltipTitle={collateralAsset.symbol}
+                customTooltipDetail="Collateral Asset in this market"
+                showExplorerLink={showExplorerLink}
+              />
+            </div>
+          )}
+        </>
+      )}
     </div>
   );