diff --git a/app/admin/stats/components/AssetMetricsTable.tsx b/app/admin/stats/components/AssetMetricsTable.tsx
index 1ddd279f..0225ed05 100644
--- a/app/admin/stats/components/AssetMetricsTable.tsx
+++ b/app/admin/stats/components/AssetMetricsTable.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react';
 import { FiChevronUp, FiChevronDown } from 'react-icons/fi';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatReadable } from '@/utils/balance';
 import { calculateHumanReadableVolumes } from '@/utils/statsDataProcessing';
@@ -25,7 +26,7 @@ type SortableHeaderProps = {
 
 function SortableHeader({ label, sortKeyValue, currentSortKey, sortDirection, onSort }: SortableHeaderProps) {
   return (
-    <th
+    <TableHead
       className={`px-2 py-2 font-normal whitespace-nowrap ${currentSortKey === sortKeyValue ? 'text-primary' : ''}`}
       onClick={() => onSort(sortKeyValue)}
       style={{ padding: '0.5rem' }}
@@ -35,7 +36,7 @@ function SortableHeader({ label, sortKeyValue, currentSortKey, sortDirection, on
         {currentSortKey === sortKeyValue &&
           (sortDirection === 'asc' ? <FiChevronUp className="h-4 w-4" /> : <FiChevronDown className="h-4 w-4" />)}
       </div>
-    </th>
+    </TableHead>
   );
 }
 
@@ -92,10 +93,10 @@ export function AssetMetricsTable({ data }: AssetMetricsTableProps) {
         {processedData.length === 0 ? (
           <div className="py-8 text-center text-gray-400">No asset data available</div>
         ) : (
-          <table className="responsive rounded-md font-zen w-full min-w-full">
-            <thead className="table-header">
-              <tr>
-                <th className="font-normal px-2 py-2 whitespace-nowrap">Asset</th>
+          <Table className="responsive rounded-md font-zen w-full min-w-full">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="font-normal px-2 py-2 whitespace-nowrap">Asset</TableHead>
                 <SortableHeader
                   label="Total Volume"
                   sortKeyValue="totalVolume"
@@ -131,19 +132,19 @@ export function AssetMetricsTable({ data }: AssetMetricsTableProps) {
                   sortDirection={sortDirection}
                   onSort={handleSort}
                 />
-              </tr>
-            </thead>
-            <tbody className="table-body text-sm">
+              </TableRow>
+            </TableHeader>
+            <TableBody className="text-sm">
               {sortedData.map((asset) => {
                 // Use a determined chainId for display purposes
                 const displayChainId = asset.chainId ?? BASE_CHAIN_ID;
 
                 return (
-                  <tr
+                  <TableRow
                     key={`${asset.assetAddress}-${asset.chainId}`}
                     className="hover:bg-hovered"
                   >
-                    <td
+                    <TableCell
                       data-label="Asset"
                       className="z-50"
                       style={{ minWidth: '120px' }}
@@ -158,8 +159,8 @@ export function AssetMetricsTable({ data }: AssetMetricsTableProps) {
                         />
                         <span className="font-zen text-sm">{asset.assetSymbol ?? 'Unknown'}</span>
                       </div>
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       data-label="Total Volume"
                       className="z-50 text-center"
                       style={{ minWidth: '120px' }}
@@ -167,40 +168,40 @@ export function AssetMetricsTable({ data }: AssetMetricsTableProps) {
                       <span className="text-sm">
                         {asset.totalVolumeFormatted ? `${formatReadable(Number(asset.totalVolumeFormatted))} ${asset.assetSymbol}` : '—'}
                       </span>
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       data-label="Total Transactions"
                       className="z-50 text-center"
                       style={{ minWidth: '100px' }}
                     >
                       <span className="text-sm">{(asset.supplyCount + asset.withdrawCount).toLocaleString()}</span>
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       data-label="Supply Count"
                       className="z-50 text-center"
                       style={{ minWidth: '100px' }}
                     >
                       <span className="text-sm">{asset.supplyCount.toLocaleString()}</span>
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       data-label="Withdraw Count"
                       className="z-50 text-center"
                       style={{ minWidth: '100px' }}
                     >
                       <span className="text-sm">{asset.withdrawCount.toLocaleString()}</span>
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       data-label="Unique Users"
                       className="z-50 text-center"
                       style={{ minWidth: '100px' }}
                     >
                       <span className="text-sm">{asset.uniqueUsers.toLocaleString()}</span>
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                 );
               })}
-            </tbody>
-          </table>
+            </TableBody>
+          </Table>
         )}
       </div>
     </div>
diff --git a/app/admin/stats/components/TransactionTableBody.tsx b/app/admin/stats/components/TransactionTableBody.tsx
index 01fb35ca..63ee7be9 100644
--- a/app/admin/stats/components/TransactionTableBody.tsx
+++ b/app/admin/stats/components/TransactionTableBody.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { formatUnits } from 'viem';
+import { TableBody, TableRow, TableCell } from '@/components/ui/table';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
 import { TransactionIdentity } from '@/components/common/TransactionIdentity';
 import { MarketIdBadge } from '@/components/MarketIdBadge';
@@ -66,17 +67,17 @@ const formatAmount = (amount: string, side: 'Supply' | 'Withdraw', loanAddress:
 
 export function TransactionTableBody({ operations, selectedNetwork }: TransactionTableBodyProps) {
   return (
-    <tbody className="table-body text-sm">
+    <TableBody className="text-sm">
       {operations.map((op) => {
         const marketPath = op.market ? `/market/${selectedNetwork}/${op.market.uniqueKey}` : null;
 
         return (
-          <tr
+          <TableRow
             key={op.txId}
             className="hover:bg-hovered"
           >
             {/* User Address */}
-            <td
+            <TableCell
               data-label="User"
               className="z-50"
               style={{ minWidth: '120px' }}
@@ -86,10 +87,10 @@ export function TransactionTableBody({ operations, selectedNetwork }: Transactio
                 variant="badge"
                 linkTo="profile"
               />
-            </td>
+            </TableCell>
 
             {/* Loan Asset */}
-            <td
+            <TableCell
               data-label="Loan Asset"
               className="z-50"
               style={{ minWidth: '100px' }}
@@ -104,10 +105,10 @@ export function TransactionTableBody({ operations, selectedNetwork }: Transactio
                 />
                 <span className="text-sm whitespace-nowrap">{getTruncatedAssetName(op.loanSymbol)}</span>
               </div>
-            </td>
+            </TableCell>
 
             {/* Market */}
-            <td
+            <TableCell
               data-label="Market"
               className="z-50"
               style={{ minWidth: '200px' }}
@@ -134,10 +135,10 @@ export function TransactionTableBody({ operations, selectedNetwork }: Transactio
               ) : (
                 <span className="text-xs text-secondary">—</span>
               )}
-            </td>
+            </TableCell>
 
             {/* Side */}
-            <td
+            <TableCell
               data-label="Side"
               className="z-50 text-center"
               style={{ minWidth: '80px' }}
@@ -149,19 +150,19 @@ export function TransactionTableBody({ operations, selectedNetwork }: Transactio
               >
                 {op.side}
               </span>
-            </td>
+            </TableCell>
 
             {/* Amount */}
-            <td
+            <TableCell
               data-label="Amount"
               className="z-50"
               style={{ minWidth: '120px' }}
             >
               <span className="text-sm">{formatAmount(op.amount, op.side, op.loanAddress, selectedNetwork)}</span>
-            </td>
+            </TableCell>
 
             {/* Transaction Hash */}
-            <td
+            <TableCell
               data-label="Tx Hash"
               className="z-50"
               style={{ minWidth: '120px' }}
@@ -170,19 +171,19 @@ export function TransactionTableBody({ operations, selectedNetwork }: Transactio
                 txHash={op.txHash}
                 chainId={selectedNetwork}
               />
-            </td>
+            </TableCell>
 
             {/* Time */}
-            <td
+            <TableCell
               data-label="Time"
               className="z-50"
               style={{ minWidth: '90px' }}
             >
               <span className="text-xs text-secondary whitespace-nowrap">{formatTimeAgo(op.timestamp)}</span>
-            </td>
-          </tr>
+            </TableCell>
+          </TableRow>
         );
       })}
-    </tbody>
+    </TableBody>
   );
 }
diff --git a/app/admin/stats/components/TransactionsTable.tsx b/app/admin/stats/components/TransactionsTable.tsx
index dfa3bc2c..8af052d9 100644
--- a/app/admin/stats/components/TransactionsTable.tsx
+++ b/app/admin/stats/components/TransactionsTable.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react';
 import { FiChevronUp, FiChevronDown } from 'react-icons/fi';
+import { Table, TableHeader, TableRow, TableHead } from '@/components/ui/table';
 import { TablePagination } from '@/components/common/TablePagination';
 import type { SupportedNetworks } from '@/utils/networks';
 import type { Transaction } from '@/utils/statsUtils';
@@ -41,7 +42,7 @@ type SortableHeaderProps = {
 
 function SortableHeader({ label, sortKeyValue, currentSortKey, sortDirection, onSort }: SortableHeaderProps) {
   return (
-    <th
+    <TableHead
       className={`px-2 py-2 font-normal whitespace-nowrap ${currentSortKey === sortKeyValue ? 'text-primary' : ''}`}
       onClick={() => onSort(sortKeyValue)}
       style={{ padding: '0.5rem' }}
@@ -51,7 +52,7 @@ function SortableHeader({ label, sortKeyValue, currentSortKey, sortDirection, on
         {currentSortKey === sortKeyValue &&
           (sortDirection === 'asc' ? <FiChevronUp className="h-4 w-4" /> : <FiChevronDown className="h-4 w-4" />)}
       </div>
-    </th>
+    </TableHead>
   );
 }
 
@@ -196,13 +197,13 @@ export function TransactionsTable({
           <div className="py-8 text-center text-gray-400">No transaction data available</div>
         ) : (
           <>
-            <table className="responsive rounded-md font-zen w-full min-w-full">
-              <thead className="table-header">
-                <tr>
-                  <th className="font-normal px-2 py-2 whitespace-nowrap">User</th>
-                  <th className="font-normal px-2 py-2 whitespace-nowrap">Loan Asset</th>
-                  <th className="font-normal px-2 py-2 whitespace-nowrap">Market</th>
-                  <th className="font-normal px-2 py-2 whitespace-nowrap">Side</th>
+            <Table className="responsive rounded-md font-zen w-full min-w-full">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="font-normal px-2 py-2 whitespace-nowrap">User</TableHead>
+                  <TableHead className="font-normal px-2 py-2 whitespace-nowrap">Loan Asset</TableHead>
+                  <TableHead className="font-normal px-2 py-2 whitespace-nowrap">Market</TableHead>
+                  <TableHead className="font-normal px-2 py-2 whitespace-nowrap">Side</TableHead>
                   <SortableHeader
                     label="Amount"
                     sortKeyValue="amount"
@@ -210,7 +211,7 @@ export function TransactionsTable({
                     sortDirection={sortDirection}
                     onSort={handleSort}
                   />
-                  <th className="font-normal px-2 py-2 whitespace-nowrap">Tx Hash</th>
+                  <TableHead className="font-normal px-2 py-2 whitespace-nowrap">Tx Hash</TableHead>
                   <SortableHeader
                     label="Time"
                     sortKeyValue="timestamp"
@@ -218,13 +219,13 @@ export function TransactionsTable({
                     sortDirection={sortDirection}
                     onSort={handleSort}
                   />
-                </tr>
-              </thead>
+                </TableRow>
+              </TableHeader>
               <TransactionTableBody
                 operations={currentEntries}
                 selectedNetwork={selectedNetwork}
               />
-            </table>
+            </Table>
             <div className="p-4">
               <TablePagination
                 totalPages={totalPages}
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/allocations/CollateralView.tsx b/app/autovault/[chainId]/[vaultAddress]/components/allocations/CollateralView.tsx
index 0f0db836..803df043 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/allocations/CollateralView.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/allocations/CollateralView.tsx
@@ -1,3 +1,4 @@
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { TokenIcon } from '@/components/TokenIcon';
 import type { CollateralAllocation } from '@/types/vaultAllocations';
 import type { SupportedNetworks } from '@/utils/networks';
@@ -22,26 +23,26 @@ export function CollateralView({ allocations, totalAllocation, vaultAssetSymbol,
 
   return (
     <div className="overflow-x-auto">
-      <table className="w-full font-zen">
-        <thead>
-          <tr className="text-xs text-secondary">
-            <th className="pb-3 text-left font-normal">Collateral</th>
-            <th className="pb-3 text-right font-normal">Amount</th>
-            <th className="pb-3 text-right font-normal">Allocation</th>
-            <th className="pb-3 text-center font-normal w-10" />
-          </tr>
-        </thead>
-        <tbody className="space-y-2">
+      <Table className="w-full font-zen">
+        <TableHeader>
+          <TableRow className="text-xs text-secondary">
+            <TableHead className="pb-3 text-left font-normal">Collateral</TableHead>
+            <TableHead className="pb-3 text-right font-normal">Amount</TableHead>
+            <TableHead className="pb-3 text-right font-normal">Allocation</TableHead>
+            <TableHead className="pb-3 text-center font-normal w-10" />
+          </TableRow>
+        </TableHeader>
+        <TableBody className="space-y-2">
           {sortedItems.map((item) => {
             const percentage = totalAllocation > 0n ? Number.parseFloat(calculateAllocationPercent(item.allocation, totalAllocation)) : 0;
             const hasAllocation = item.allocation > 0n;
 
             return (
-              <tr
+              <TableRow
                 key={item.collateralAddress.toLowerCase()}
                 className="rounded bg-hovered/20"
               >
-                <td className="p-3 rounded-l">
+                <TableCell className="p-3 rounded-l">
                   <div className="flex items-center gap-3">
                     <TokenIcon
                       address={item.collateralAddress}
@@ -51,28 +52,28 @@ export function CollateralView({ allocations, totalAllocation, vaultAssetSymbol,
                     />
                     <span className="text-sm whitespace-nowrap">{item.collateralSymbol}</span>
                   </div>
-                </td>
-                <td className={`p-3 text-right text-sm ${hasAllocation ? '' : 'text-secondary'}`}>
+                </TableCell>
+                <TableCell className={`p-3 text-right text-sm ${hasAllocation ? '' : 'text-secondary'}`}>
                   <span className="whitespace-nowrap">
                     {hasAllocation ? `${formatAllocationAmount(item.allocation, vaultAssetDecimals)} ${vaultAssetSymbol}` : '-'}
                   </span>
-                </td>
-                <td className={`p-3 text-right text-sm ${hasAllocation ? 'text-primary' : 'text-secondary'}`}>
+                </TableCell>
+                <TableCell className={`p-3 text-right text-sm ${hasAllocation ? 'text-primary' : 'text-secondary'}`}>
                   <span className="whitespace-nowrap">{hasAllocation ? `${percentage.toFixed(2)}%` : '-'}</span>
-                </td>
-                <td className="p-3 rounded-r w-10">
+                </TableCell>
+                <TableCell className="p-3 rounded-r w-10">
                   <div className="flex justify-center">
                     <AllocationPieChart
                       percentage={percentage}
                       size={20}
                     />
                   </div>
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             );
           })}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </div>
   );
 }
diff --git a/app/autovault/[chainId]/[vaultAddress]/components/allocations/MarketView.tsx b/app/autovault/[chainId]/[vaultAddress]/components/allocations/MarketView.tsx
index 8dad6722..3cf86c33 100644
--- a/app/autovault/[chainId]/[vaultAddress]/components/allocations/MarketView.tsx
+++ b/app/autovault/[chainId]/[vaultAddress]/components/allocations/MarketView.tsx
@@ -1,3 +1,4 @@
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { MarketIdentity, MarketIdentityFocus } from '@/components/MarketIdentity';
 import { useMarkets } from '@/hooks/useMarkets';
 import { useRateLabel } from '@/hooks/useRateLabel';
@@ -29,19 +30,19 @@ export function MarketView({ allocations, totalAllocation, vaultAssetSymbol, vau
 
   return (
     <div className="overflow-x-auto">
-      <table className="w-full font-zen">
-        <thead>
-          <tr className="text-xs text-secondary">
-            <th className="pb-3 text-left font-normal">Market</th>
-            <th className="pb-3 text-right font-normal">{rateLabel}</th>
-            <th className="pb-3 text-right font-normal">Total Supply</th>
-            <th className="pb-3 text-right font-normal">Liquidity</th>
-            <th className="pb-3 text-right font-normal">Amount</th>
-            <th className="pb-3 text-right font-normal">Allocation</th>
-            <th className="pb-3 text-center font-normal w-10" />
-          </tr>
-        </thead>
-        <tbody className="space-y-2">
+      <Table className="w-full font-zen">
+        <TableHeader>
+          <TableRow className="text-xs text-secondary">
+            <TableHead className="pb-3 text-left font-normal">Market</TableHead>
+            <TableHead className="pb-3 text-right font-normal">{rateLabel}</TableHead>
+            <TableHead className="pb-3 text-right font-normal">Total Supply</TableHead>
+            <TableHead className="pb-3 text-right font-normal">Liquidity</TableHead>
+            <TableHead className="pb-3 text-right font-normal">Amount</TableHead>
+            <TableHead className="pb-3 text-right font-normal">Allocation</TableHead>
+            <TableHead className="pb-3 text-center font-normal w-10" />
+          </TableRow>
+        </TableHeader>
+        <TableBody className="space-y-2">
           {sortedItems.map((item) => {
             const { market, allocation } = item;
             const percentage = totalAllocation > 0n ? Number.parseFloat(calculateAllocationPercent(allocation, totalAllocation)) : 0;
@@ -54,12 +55,12 @@ export function MarketView({ allocations, totalAllocation, vaultAssetSymbol, vau
             );
 
             return (
-              <tr
+              <TableRow
                 key={market.uniqueKey}
                 className="rounded bg-hovered/20"
               >
                 {/* Market Info Column */}
-                <td className="p-3 rounded-l">
+                <TableCell className="p-3 rounded-l">
                   <MarketIdentity
                     market={market}
                     chainId={chainId}
@@ -69,43 +70,43 @@ export function MarketView({ allocations, totalAllocation, vaultAssetSymbol, vau
                     iconSize={20}
                     showExplorerLink
                   />
-                </td>
+                </TableCell>
 
                 {/* APY/APR */}
-                <td className="p-3 text-right text-xs text-secondary whitespace-nowrap">{supplyRate}%</td>
+                <TableCell className="p-3 text-right text-xs text-secondary whitespace-nowrap">{supplyRate}%</TableCell>
 
                 {/* Total Supply */}
-                <td className="p-3 text-right text-xs text-secondary whitespace-nowrap">{totalSupply}</td>
+                <TableCell className="p-3 text-right text-xs text-secondary whitespace-nowrap">{totalSupply}</TableCell>
 
                 {/* Liquidity */}
-                <td className="p-3 text-right text-xs text-secondary whitespace-nowrap">{liquidity}</td>
+                <TableCell className="p-3 text-right text-xs text-secondary whitespace-nowrap">{liquidity}</TableCell>
 
                 {/* Allocation Amount */}
-                <td className={`p-3 text-right text-sm ${hasAllocation ? '' : 'text-secondary'}`}>
+                <TableCell className={`p-3 text-right text-sm ${hasAllocation ? '' : 'text-secondary'}`}>
                   <span className="whitespace-nowrap">
                     {hasAllocation ? `${formatAllocationAmount(allocation, vaultAssetDecimals)} ${vaultAssetSymbol}` : '-'}
                   </span>
-                </td>
+                </TableCell>
 
                 {/* Allocation Percentage */}
-                <td className={`p-3 text-right text-sm ${hasAllocation ? 'text-primary' : 'text-secondary'}`}>
+                <TableCell className={`p-3 text-right text-sm ${hasAllocation ? 'text-primary' : 'text-secondary'}`}>
                   <span className="whitespace-nowrap">{hasAllocation ? `${percentage.toFixed(2)}%` : '-'}</span>
-                </td>
+                </TableCell>
 
                 {/* Pie Chart */}
-                <td className="p-3 rounded-r w-10">
+                <TableCell className="p-3 rounded-r w-10">
                   <div className="flex justify-center">
                     <AllocationPieChart
                       percentage={percentage}
                       size={20}
                     />
                   </div>
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             );
           })}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </div>
   );
 }
diff --git a/app/autovault/components/VaultListV2.tsx b/app/autovault/components/VaultListV2.tsx
index 9bb11fa8..f615a745 100644
--- a/app/autovault/components/VaultListV2.tsx
+++ b/app/autovault/components/VaultListV2.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { formatUnits } from 'viem';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/common/Spinner';
 import { useTokens } from '@/components/providers/TokenProvider';
@@ -51,17 +52,17 @@ export function VaultListV2({ vaults, loading }: VaultListV2Props) {
       <h2 className="text-lg">Your Vaults</h2>
 
       <div className="w-full overflow-x-auto">
-        <table className="responsive w-full rounded font-zen">
-          <thead className="table-header">
-            <tr>
-              <th className="font-normal">ID</th>
-              <th className="font-normal">Asset</th>
-              <th className="font-normal">{rateLabel}</th>
-              <th className="font-normal">Collaterals</th>
-              <th className="font-normal">Action</th>
-            </tr>
-          </thead>
-          <tbody className="table-body text-sm">
+        <Table className="responsive w-full rounded font-zen">
+          <TableHeader className="">
+            <TableRow>
+              <TableHead className="font-normal">ID</TableHead>
+              <TableHead className="font-normal">Asset</TableHead>
+              <TableHead className="font-normal">{rateLabel}</TableHead>
+              <TableHead className="font-normal">Collaterals</TableHead>
+              <TableHead className="font-normal">Action</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="text-sm">
             {vaults.map((vault) => {
               const token = findToken(vault.asset, vault.networkId);
               const networkImg = getNetworkImg(vault.networkId);
@@ -71,9 +72,9 @@ export function VaultListV2({ vaults, loading }: VaultListV2Props) {
                 .filter((collat) => collat !== undefined);
 
               return (
-                <tr key={vault.address}>
+                <TableRow key={vault.address}>
                   {/* ID */}
-                  <td data-label="ID">
+                  <TableCell data-label="ID">
                     <div className="flex items-center justify-center gap-1 font-monospace text-xs">
                       {networkImg && (
                         <Image
@@ -85,10 +86,10 @@ export function VaultListV2({ vaults, loading }: VaultListV2Props) {
                       )}
                       <span>{vault.address.slice(2, 8)}</span>
                     </div>
-                  </td>
+                  </TableCell>
 
                   {/* Asset */}
-                  <td data-label="Asset">
+                  <TableCell data-label="Asset">
                     <div className="flex items-center justify-center gap-2">
                       <span className="font-medium">
                         {vault.balance && token ? formatReadable(formatUnits(BigInt(vault.balance), token.decimals)) : '0'}
@@ -101,17 +102,17 @@ export function VaultListV2({ vaults, loading }: VaultListV2Props) {
                         height={16}
                       />
                     </div>
-                  </td>
+                  </TableCell>
 
                   {/* APY/APR */}
-                  <td data-label={rateLabel}>
+                  <TableCell data-label={rateLabel}>
                     <span className="font-zen text-sm">
                       {vault.avgApy != null ? `${((isAprDisplay ? convertApyToApr(vault.avgApy) : vault.avgApy) * 100).toFixed(2)}%` : '—'}
                     </span>
-                  </td>
+                  </TableCell>
 
                   {/* Collaterals */}
-                  <td data-label="Collaterals">
+                  <TableCell data-label="Collaterals">
                     <span className="flex flex-wrap gap-1.5 justify-center">
                       {collaterals.map((tokenAddress) => (
                         <div
@@ -127,10 +128,10 @@ export function VaultListV2({ vaults, loading }: VaultListV2Props) {
                         </div>
                       ))}
                     </span>
-                  </td>
+                  </TableCell>
 
                   {/* Action */}
-                  <td data-label="Action">
+                  <TableCell data-label="Action">
                     <div className="flex justify-center">
                       <Link href={`/autovault/${vault.networkId ?? SupportedNetworks.Base}/${vault.address}`}>
                         <Button
@@ -141,12 +142,12 @@ export function VaultListV2({ vaults, loading }: VaultListV2Props) {
                         </Button>
                       </Link>
                     </div>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               );
             })}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
     </div>
   );
diff --git a/app/global.css b/app/global.css
index 44053dee..a6971053 100644
--- a/app/global.css
+++ b/app/global.css
@@ -303,35 +303,35 @@ h1 {
   padding-bottom: 0.5rem;
 }
 
-.table-header {
+/* Table styles - applied automatically to thead and tbody */
+thead {
   background-color: var(--color-background-secondary);
   font-size: 0.8em;
   color: grey;
 }
 
-.table-header th {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  text-align: center;
+thead th {
+  padding: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
-.table-body {
+tbody {
   background-color: var(--color-background-secondary);
   border-left: 2px solid var(--color-background-secondary);
 }
 
-.table-body td {
+tbody td {
   padding: 1rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  text-align: center;
 }
 
-.table-body tr:not(.no-hover-effect tr, .no-hover-effect tr) {
+tbody tr:not(.no-hover-effect tr) {
   border-left: 2px solid transparent;
 }
 
-.table-body tr:not(.no-hover-effect tr, .no-hover-effect tr):hover {
+tbody tr:not(.no-hover-effect tr):hover {
   background-color: var(--palette-bg-hovered);
   border-left: 2px solid var(--palette-orange);
 }
@@ -341,6 +341,13 @@ h1 {
   border-left: 2px solid var(--palette-orange) !important;
 }
 
+/* Compact table variant - less padding for simpler tables */
+.table-body-compact td {
+  padding: 0.625rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 svg {
   display: block;
   overflow: visible;
diff --git a/app/history/components/HistoryTable.tsx b/app/history/components/HistoryTable.tsx
index 666b6ed6..8a3c3b6e 100644
--- a/app/history/components/HistoryTable.tsx
+++ b/app/history/components/HistoryTable.tsx
@@ -1,12 +1,14 @@
 import type React from 'react';
 import { useMemo, useState, useRef, useEffect } from 'react';
-import { Chip, Link, Pagination, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@heroui/react';
+import { Chip, Link } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import { ChevronDownIcon, TrashIcon } from '@radix-ui/react-icons';
 import moment from 'moment';
 import Image from 'next/image';
 import { RiRobot2Line } from 'react-icons/ri';
 import { formatUnits } from 'viem';
 import { Badge } from '@/components/common/Badge';
+import { TablePagination } from '@/components/common/TablePagination';
 import { TransactionIdentity } from '@/components/common/TransactionIdentity';
 import LoadingScreen from '@/components/Status/LoadingScreen';
 import { TokenIcon } from '@/components/TokenIcon';
@@ -252,146 +254,152 @@ export function HistoryTable({ account, positions, rebalancerInfos }: HistoryTab
       {!isInitialized || loading ? (
         <LoadingScreen message="Loading transactions..." />
       ) : (
-        <Table
-          classNames={{
-            th: 'bg-surface',
-            wrapper: 'rounded-none shadow-none bg-surface p-6',
-          }}
-          bottomContent={
-            totalPages > 1 ? (
-              <div className="flex w-full justify-center">
-                <Pagination
-                  className="text-black"
-                  isCompact
-                  showControls
-                  color="default"
-                  page={currentPage}
-                  total={totalPages}
-                  onChange={setCurrentPage}
-                />
-              </div>
-            ) : null
-          }
-        >
-          <TableHeader className="table-header">
-            <TableColumn className="text-left">Asset & Network</TableColumn>
-            <TableColumn className="text-left">Market Details</TableColumn>
-            <TableColumn className="text-center">Action & Amount</TableColumn>
-            <TableColumn className="text-center">Time</TableColumn>
-            <TableColumn className="text-center">Transaction</TableColumn>
-          </TableHeader>
-          <TableBody emptyContent="No transactions found">
-            {history
-              .filter((tx) => tx.data.market !== undefined)
-              .map((tx, index) => {
-                // safely cast here because we only fetch txs for unique id in "markets"
-                const market = allMarkets.find((m) => m.uniqueKey === tx.data.market.uniqueKey) as Market;
+        <>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-left">Asset & Network</TableHead>
+                <TableHead className="text-left">Market Details</TableHead>
+                <TableHead className="text-center">Action & Amount</TableHead>
+                <TableHead className="text-center">Time</TableHead>
+                <TableHead className="text-right">Transaction</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody className="table-body-compact">
+              {history.filter((tx) => tx.data.market !== undefined).length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="text-center text-gray-400"
+                  >
+                    No transactions found
+                  </TableCell>
+                </TableRow>
+              ) : (
+                history
+                  .filter((tx) => tx.data.market !== undefined)
+                  .map((tx, index) => {
+                    // safely cast here because we only fetch txs for unique id in "markets"
+                    const market = allMarkets.find((m) => m.uniqueKey === tx.data.market.uniqueKey) as Market;
 
-                const networkImg = getNetworkImg(market.morphoBlue.chain.id);
-                const networkName = getNetworkName(market.morphoBlue.chain.id);
-                const sign = tx.type === UserTxTypes.MarketSupply ? '+' : '-';
-                const lltv = Number(formatUnits(BigInt(market.lltv), 18)) * 100;
+                    const networkImg = getNetworkImg(market.morphoBlue.chain.id);
+                    const networkName = getNetworkName(market.morphoBlue.chain.id);
+                    const sign = tx.type === UserTxTypes.MarketSupply ? '+' : '-';
+                    const lltv = Number(formatUnits(BigInt(market.lltv), 18)) * 100;
 
-                // Find the rebalancer info for the specific network of the transaction
-                const networkRebalancerInfo = rebalancerInfos.find((info) => info.network === market.morphoBlue.chain.id);
-                // Check if the transaction hash exists in the transactions of the found rebalancer info
-                const isAgent = networkRebalancerInfo?.transactions.some((agentTx) => agentTx.transactionHash === tx.hash);
+                    // Find the rebalancer info for the specific network of the transaction
+                    const networkRebalancerInfo = rebalancerInfos.find((info) => info.network === market.morphoBlue.chain.id);
+                    // Check if the transaction hash exists in the transactions of the found rebalancer info
+                    const isAgent = networkRebalancerInfo?.transactions.some((agentTx) => agentTx.transactionHash === tx.hash);
 
-                return (
-                  <TableRow key={index.toFixed()}>
-                    {/* Network & Asset */}
-                    <TableCell>
-                      <div className="flex items-center gap-2">
-                        <div className="flex items-center gap-1">
-                          <TokenIcon
-                            address={market.loanAsset.address}
-                            chainId={market.morphoBlue.chain.id}
-                            symbol={market.loanAsset.symbol}
-                            width={20}
-                            height={20}
-                          />
-                          <span className="text-default-600">{market.loanAsset.symbol}</span>
-                        </div>
-                        <div className="flex items-center gap-1 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-700">
-                          {networkImg && (
-                            <Image
-                              src={networkImg}
-                              alt="network"
-                              width="16"
-                              height="16"
-                              className="rounded-full"
-                            />
-                          )}
-                          <span className="text-xs text-gray-600 dark:text-gray-300">{networkName}</span>
-                        </div>
-                      </div>
-                    </TableCell>
+                    return (
+                      <TableRow key={index.toFixed()}>
+                        {/* Network & Asset */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <div className="flex items-center gap-1">
+                              <TokenIcon
+                                address={market.loanAsset.address}
+                                chainId={market.morphoBlue.chain.id}
+                                symbol={market.loanAsset.symbol}
+                                width={16}
+                                height={16}
+                              />
+                              <span className="text-default-600 text-sm">{market.loanAsset.symbol}</span>
+                            </div>
+                            <div className="flex items-center gap-1 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-700">
+                              {networkImg && (
+                                <Image
+                                  src={networkImg}
+                                  alt="network"
+                                  width="16"
+                                  height="16"
+                                  className="rounded-full"
+                                />
+                              )}
+                              <span className="text-xs text-gray-600 dark:text-gray-300">{networkName}</span>
+                            </div>
+                          </div>
+                        </TableCell>
 
-                    {/* Market Details */}
-                    <TableCell>
-                      <div className="flex items-center gap-2">
-                        <Link
-                          href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}
-                          className="font-monospace text-xs hover:underline"
-                        >
-                          {market.uniqueKey.slice(2, 8)}
-                        </Link>
-                        <div className="flex items-center gap-1">
-                          <TokenIcon
-                            address={market.collateralAsset.address}
-                            chainId={market.morphoBlue.chain.id}
-                            symbol={market.collateralAsset.symbol}
-                            width={16}
-                            height={16}
-                          />
-                          <span className="text-sm text-default-500">{market.collateralAsset.symbol}</span>
-                        </div>
-                        <Chip
-                          size="sm"
-                          variant="light"
-                          className="bg-default-100 text-xs"
-                          radius="sm"
-                        >
-                          {formatReadable(lltv)}%
-                        </Chip>
-                      </div>
-                    </TableCell>
+                        {/* Market Details */}
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Link
+                              href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}
+                              className="font-monospace text-xs hover:underline"
+                            >
+                              {market.uniqueKey.slice(2, 8)}
+                            </Link>
+                            <div className="flex items-center gap-1">
+                              <TokenIcon
+                                address={market.collateralAsset.address}
+                                chainId={market.morphoBlue.chain.id}
+                                symbol={market.collateralAsset.symbol}
+                                width={16}
+                                height={16}
+                              />
+                              <span className="text-sm text-default-500">{market.collateralAsset.symbol}</span>
+                            </div>
+                            <Chip
+                              size="sm"
+                              variant="light"
+                              className="bg-default-100 text-xs"
+                              radius="sm"
+                            >
+                              {formatReadable(lltv)}%
+                            </Chip>
+                          </div>
+                        </TableCell>
 
-                    {/* Action & Amount */}
-                    <TableCell>
-                      <div className="flex items-center justify-center gap-2">
-                        <span className="font-medium">{actionTypeToText(tx.type)}</span>
-                        <span className={tx.type === UserTxTypes.MarketSupply ? 'text-success' : 'text-danger'}>
-                          {sign}
-                          {formatReadable(Number(formatUnits(BigInt(tx.data.assets), market.loanAsset.decimals)))} {market.loanAsset.symbol}
-                        </span>
-                        {isAgent && (
-                          <Badge size="sm">
-                            <RiRobot2Line />
-                          </Badge>
-                        )}
-                      </div>
-                    </TableCell>
+                        {/* Action & Amount */}
+                        <TableCell>
+                          <div className="flex items-center justify-center gap-2 text-sm">
+                            <span className="">{actionTypeToText(tx.type)}</span>
+                            <span className={tx.type === UserTxTypes.MarketSupply ? 'text-success' : 'text-danger'}>
+                              {sign}
+                              {formatReadable(Number(formatUnits(BigInt(tx.data.assets), market.loanAsset.decimals)))}{' '}
+                              {market.loanAsset.symbol}
+                            </span>
+                            {isAgent && (
+                              <Badge size="sm">
+                                <RiRobot2Line />
+                              </Badge>
+                            )}
+                          </div>
+                        </TableCell>
 
-                    {/* Time */}
-                    <TableCell>
-                      <div className="flex justify-center text-sm text-default-500">{moment.unix(tx.timestamp).fromNow()}</div>
-                    </TableCell>
+                        {/* Time */}
+                        <TableCell>
+                          <div className="flex justify-center text-sm text-gray-500">{moment.unix(tx.timestamp).fromNow()}</div>
+                        </TableCell>
 
-                    {/* Transaction */}
-                    <TableCell>
-                      <div className="flex justify-center">
-                        <TransactionIdentity
-                          txHash={tx.hash}
-                          chainId={market.morphoBlue.chain.id}
-                        />
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-          </TableBody>
-        </Table>
+                        {/* Transaction */}
+                        <TableCell>
+                          <div className="flex justify-end">
+                            <TransactionIdentity
+                              txHash={tx.hash}
+                              chainId={market.morphoBlue.chain.id}
+                            />
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+              )}
+            </TableBody>
+          </Table>
+          {totalPages > 1 && (
+            <TablePagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              totalEntries={totalPages * pageSize}
+              pageSize={pageSize}
+              onPageChange={setCurrentPage}
+              isLoading={loading}
+            />
+          )}
+        </>
       )}
     </div>
   );
diff --git a/app/market/[chainId]/[marketid]/components/BorrowersTable.tsx b/app/market/[chainId]/[marketid]/components/BorrowersTable.tsx
index f536d884..d170542c 100644
--- a/app/market/[chainId]/[marketid]/components/BorrowersTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/BorrowersTable.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react';
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Tooltip } from '@heroui/react';
+import { Tooltip } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import { FiFilter } from 'react-icons/fi';
 import type { Address } from 'viem';
 import { formatUnits } from 'viem';
@@ -108,76 +109,83 @@ export function BorrowersTable({ chainId, market, minShares, oraclePrice, onOpen
           </div>
         )}
 
-        <Table
-          key={tableKey}
-          classNames={{
-            wrapper: 'bg-surface shadow-sm rounded',
-            table: 'bg-surface',
-          }}
-          aria-label="Market borrowers"
-        >
-          <TableHeader>
-            <TableColumn>ACCOUNT</TableColumn>
-            <TableColumn align="end">BORROWED</TableColumn>
-            <TableColumn align="end">COLLATERAL</TableColumn>
-            <TableColumn align="end">LTV</TableColumn>
-            <TableColumn align="end">% OF BORROW</TableColumn>
-          </TableHeader>
-          <TableBody
-            className="font-zen"
-            emptyContent={isLoading ? 'Loading...' : 'No borrowers found for this market'}
-            isLoading={isLoading}
+        <div className="bg-surface shadow-sm rounded overflow-hidden">
+          <Table
+            key={tableKey}
+            aria-label="Market borrowers"
           >
-            {borrowersWithLTV.map((borrower) => {
-              const totalBorrow = BigInt(market.state.borrowAssets);
-              const borrowerAssets = BigInt(borrower.borrowAssets);
-              const percentOfBorrow = totalBorrow > 0n ? (Number(borrowerAssets) / Number(totalBorrow)) * 100 : 0;
-              const percentDisplay = percentOfBorrow < 0.01 && percentOfBorrow > 0 ? '<0.01%' : `${percentOfBorrow.toFixed(2)}%`;
-
-              return (
-                <TableRow key={`borrower-${borrower.userAddress}`}>
-                  <TableCell>
-                    <AccountIdentity
-                      address={borrower.userAddress as Address}
-                      variant="compact"
-                      linkTo="profile"
-                    />
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-left">ACCOUNT</TableHead>
+                <TableHead className="text-right">BORROWED</TableHead>
+                <TableHead className="text-right">COLLATERAL</TableHead>
+                <TableHead className="text-right">LTV</TableHead>
+                <TableHead className="text-right">% OF BORROW</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody className="table-body-compact">
+              {borrowersWithLTV.length === 0 && !isLoading ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="text-center text-gray-400"
+                  >
+                    No borrowers found for this market
                   </TableCell>
-                  <TableCell className="text-right">
-                    {formatSimple(Number(formatUnits(BigInt(borrower.borrowAssets), market.loanAsset.decimals)))}
-                    {market?.loanAsset?.symbol && (
-                      <span className="ml-1 inline-flex items-center">
-                        <TokenIcon
-                          address={market.loanAsset.address}
-                          chainId={market.morphoBlue.chain.id}
-                          symbol={market.loanAsset.symbol}
-                          width={16}
-                          height={16}
-                        />
-                      </span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {formatSimple(Number(formatUnits(BigInt(borrower.collateral), market.collateralAsset.decimals)))}
-                    {market?.collateralAsset?.symbol && (
-                      <span className="ml-1 inline-flex items-center">
-                        <TokenIcon
-                          address={market.collateralAsset.address}
-                          chainId={market.morphoBlue.chain.id}
-                          symbol={market.collateralAsset.symbol}
-                          width={16}
-                          height={16}
-                        />
-                      </span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">{borrower.ltv.toFixed(2)}%</TableCell>
-                  <TableCell className="text-right">{percentDisplay}</TableCell>
                 </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
+              ) : (
+                borrowersWithLTV.map((borrower) => {
+                  const totalBorrow = BigInt(market.state.borrowAssets);
+                  const borrowerAssets = BigInt(borrower.borrowAssets);
+                  const percentOfBorrow = totalBorrow > 0n ? (Number(borrowerAssets) / Number(totalBorrow)) * 100 : 0;
+                  const percentDisplay = percentOfBorrow < 0.01 && percentOfBorrow > 0 ? '<0.01%' : `${percentOfBorrow.toFixed(2)}%`;
+
+                  return (
+                    <TableRow key={`borrower-${borrower.userAddress}`}>
+                      <TableCell>
+                        <AccountIdentity
+                          address={borrower.userAddress as Address}
+                          variant="compact"
+                          linkTo="profile"
+                        />
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        <div className="flex items-center justify-end gap-1">
+                          <span>{formatSimple(Number(formatUnits(BigInt(borrower.borrowAssets), market.loanAsset.decimals)))}</span>
+                          {market?.loanAsset?.symbol && (
+                            <TokenIcon
+                              address={market.loanAsset.address}
+                              chainId={market.morphoBlue.chain.id}
+                              symbol={market.loanAsset.symbol}
+                              width={16}
+                              height={16}
+                            />
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        <div className="flex items-center justify-end gap-1">
+                          <span>{formatSimple(Number(formatUnits(BigInt(borrower.collateral), market.collateralAsset.decimals)))}</span>
+                          {market?.collateralAsset?.symbol && (
+                            <TokenIcon
+                              address={market.collateralAsset.address}
+                              chainId={market.morphoBlue.chain.id}
+                              symbol={market.collateralAsset.symbol}
+                              width={16}
+                              height={16}
+                            />
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right text-sm">{borrower.ltv.toFixed(2)}%</TableCell>
+                      <TableCell className="text-right text-sm">{percentDisplay}</TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {totalCount > 0 && (
diff --git a/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx b/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
index 54f758e7..6ea60051 100644
--- a/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/BorrowsTable.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Tooltip } from '@heroui/react';
+import { Tooltip } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import moment from 'moment';
 import { FiFilter } from 'react-icons/fi';
 import type { Address } from 'viem';
@@ -92,70 +93,72 @@ export function BorrowsTable({ chainId, market, minAssets, onOpenFiltersModal }:
           </div>
         )}
 
-        <Table
-          key={tableKey}
-          aria-label="Borrow and repay activities"
-          classNames={{
-            wrapper: 'bg-surface shadow-sm rounded',
-            table: 'bg-surface',
-          }}
-        >
-          <TableHeader>
-            <TableColumn>ACCOUNT</TableColumn>
-            <TableColumn>TYPE</TableColumn>
-            <TableColumn align="end">AMOUNT</TableColumn>
-            <TableColumn>TIME</TableColumn>
-            <TableColumn
-              className="font-mono"
-              align="end"
-            >
-              TRANSACTION
-            </TableColumn>
-          </TableHeader>
-          <TableBody
-            className="font-zen"
-            emptyContent={isLoading ? 'Loading...' : 'No borrow activities found for this market'}
-            isLoading={isLoading}
+        <div className="bg-surface shadow-sm rounded overflow-hidden">
+          <Table
+            key={tableKey}
+            aria-label="Borrow and repay activities"
           >
-            {borrows.map((borrow) => (
-              <TableRow key={`borrow-${borrow.hash}-${borrow.amount.toString()}`}>
-                <TableCell>
-                  <AccountIdentity
-                    address={borrow.userAddress as Address}
-                    variant="compact"
-                    linkTo="profile"
-                  />
-                </TableCell>
-                <TableCell>
-                  <Badge variant={borrow.type === 'MarketRepay' ? 'success' : 'danger'}>
-                    {borrow.type === 'MarketBorrow' ? 'Borrow' : 'Repay'}
-                  </Badge>
-                </TableCell>
-                <TableCell className="text-right">
-                  {formatSimple(Number(formatUnits(BigInt(borrow.amount), market.loanAsset.decimals)))}
-                  {market?.loanAsset?.symbol && (
-                    <span className="ml-1 inline-flex items-center">
-                      <TokenIcon
-                        address={market.loanAsset.address}
-                        chainId={market.morphoBlue.chain.id}
-                        symbol={market.loanAsset.symbol}
-                        width={16}
-                        height={16}
-                      />
-                    </span>
-                  )}
-                </TableCell>
-                <TableCell>{moment.unix(borrow.timestamp).fromNow()}</TableCell>
-                <TableCell className="text-right">
-                  <TransactionIdentity
-                    txHash={borrow.hash}
-                    chainId={chainId}
-                  />
-                </TableCell>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-left">ACCOUNT</TableHead>
+                <TableHead className="text-left">TYPE</TableHead>
+                <TableHead className="text-right">AMOUNT</TableHead>
+                <TableHead className="text-left">TIME</TableHead>
+                <TableHead className="text-right">TRANSACTION</TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody className="table-body-compact">
+              {borrows.length === 0 && !isLoading ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="text-center text-gray-400"
+                  >
+                    No borrow activities found for this market
+                  </TableCell>
+                </TableRow>
+              ) : (
+                borrows.map((borrow) => (
+                  <TableRow key={`borrow-${borrow.hash}-${borrow.amount.toString()}`}>
+                    <TableCell>
+                      <AccountIdentity
+                        address={borrow.userAddress as Address}
+                        variant="compact"
+                        linkTo="profile"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={borrow.type === 'MarketRepay' ? 'success' : 'danger'}>
+                        {borrow.type === 'MarketBorrow' ? 'Borrow' : 'Repay'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      <div className="flex items-center justify-end gap-1">
+                        <span>{formatSimple(Number(formatUnits(BigInt(borrow.amount), market.loanAsset.decimals)))}</span>
+                        {market?.loanAsset?.symbol && (
+                          <TokenIcon
+                            address={market.loanAsset.address}
+                            chainId={market.morphoBlue.chain.id}
+                            symbol={market.loanAsset.symbol}
+                            width={16}
+                            height={16}
+                          />
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm text-gray-500">{moment.unix(borrow.timestamp).fromNow()}</TableCell>
+                    <TableCell className="text-right text-sm text-gray-500">
+                      <TransactionIdentity
+                        txHash={borrow.hash}
+                        chainId={chainId}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {totalCount > 0 && (
diff --git a/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx b/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx
index 9b9cf4b1..ca43bdc9 100644
--- a/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import moment from 'moment';
 import { type Address, formatUnits } from 'viem';
 import { AccountIdentity } from '@/components/common/AccountIdentity';
@@ -8,6 +8,7 @@ import { TablePagination } from '@/components/common/TablePagination';
 import { TransactionIdentity } from '@/components/common/TransactionIdentity';
 import { TokenIcon } from '@/components/TokenIcon';
 import { useMarketLiquidations } from '@/hooks/useMarketLiquidations';
+import { formatSimple } from '@/utils/balance';
 import type { Market, MarketLiquidationTransaction } from '@/utils/types';
 
 type LiquidationsTableProps = {
@@ -51,83 +52,53 @@ export function LiquidationsTable({ chainId, market }: LiquidationsTableProps) {
           </div>
         )}
 
-        <Table
-          key={tableKey}
-          aria-label="Liquidations history"
-          classNames={{
-            wrapper: 'bg-surface shadow-sm rounded',
-            table: 'bg-surface',
-          }}
-        >
-          <TableHeader>
-            <TableColumn>LIQUIDATOR</TableColumn>
-            <TableColumn align="end">REPAID ({market?.loanAsset?.symbol ?? 'Loan'})</TableColumn>
-            <TableColumn align="end">SEIZED ({market?.collateralAsset?.symbol ?? 'Collateral'})</TableColumn>
-            <TableColumn align="end">BAD DEBT ({market?.loanAsset?.symbol ?? 'Loan'})</TableColumn>
-            <TableColumn>TIME</TableColumn>
-            <TableColumn
-              className="font-mono"
-              align="end"
-            >
-              TRANSACTION
-            </TableColumn>
-          </TableHeader>
-          <TableBody
-            className="font-zen"
-            emptyContent={isLoading ? 'Loading...' : 'No liquidations found for this market'}
-            isLoading={isLoading}
+        <div className="bg-surface shadow-sm rounded overflow-hidden">
+          <Table
+            key={tableKey}
+            aria-label="Liquidations history"
           >
-            {paginatedLiquidations.map((liquidation: MarketLiquidationTransaction) => {
-              const hasBadDebt = BigInt(liquidation.badDebtAssets) !== BigInt(0);
-              const isLiquidatorAddress = liquidation.liquidator?.startsWith('0x');
-
-              return (
-                <TableRow key={liquidation.hash}>
-                  <TableCell>
-                    {isLiquidatorAddress ? (
-                      <AccountIdentity
-                        address={liquidation.liquidator as Address}
-                        variant="compact"
-                        linkTo="profile"
-                      />
-                    ) : (
-                      <span>{liquidation.liquidator}</span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {formatUnits(BigInt(liquidation.repaidAssets), market.loanAsset.decimals)}
-                    {market?.loanAsset?.symbol && (
-                      <span className="ml-1 inline-flex items-center">
-                        <TokenIcon
-                          address={market.loanAsset.address}
-                          chainId={market.morphoBlue.chain.id}
-                          symbol={market.loanAsset.symbol}
-                          width={16}
-                          height={16}
-                        />
-                      </span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {formatUnits(BigInt(liquidation.seizedAssets), market.collateralAsset.decimals)}
-                    {market?.collateralAsset?.symbol && (
-                      <span className="ml-1 inline-flex items-center">
-                        <TokenIcon
-                          address={market.collateralAsset.address}
-                          chainId={market.morphoBlue.chain.id}
-                          symbol={market.collateralAsset.symbol}
-                          width={16}
-                          height={16}
-                        />
-                      </span>
-                    )}
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-left">LIQUIDATOR</TableHead>
+                <TableHead className="text-right">REPAID ({market?.loanAsset?.symbol ?? 'Loan'})</TableHead>
+                <TableHead className="text-right">SEIZED ({market?.collateralAsset?.symbol ?? 'Collateral'})</TableHead>
+                <TableHead className="text-right">BAD DEBT ({market?.loanAsset?.symbol ?? 'Loan'})</TableHead>
+                <TableHead className="text-left">TIME</TableHead>
+                <TableHead className="text-right">TRANSACTION</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody className="table-body-compact">
+              {paginatedLiquidations.length === 0 && !isLoading ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={6}
+                    className="text-center text-gray-400"
+                  >
+                    No liquidations found for this market
                   </TableCell>
-                  <TableCell className="text-right">
-                    {hasBadDebt ? (
-                      <>
-                        {formatUnits(BigInt(liquidation.badDebtAssets), market.loanAsset.decimals)}
-                        {market?.loanAsset?.symbol && (
-                          <span className="ml-1 inline-flex items-center">
+                </TableRow>
+              ) : (
+                paginatedLiquidations.map((liquidation: MarketLiquidationTransaction) => {
+                  const hasBadDebt = BigInt(liquidation.badDebtAssets) !== BigInt(0);
+                  const isLiquidatorAddress = liquidation.liquidator?.startsWith('0x');
+
+                  return (
+                    <TableRow key={liquidation.hash}>
+                      <TableCell>
+                        {isLiquidatorAddress ? (
+                          <AccountIdentity
+                            address={liquidation.liquidator as Address}
+                            variant="compact"
+                            linkTo="profile"
+                          />
+                        ) : (
+                          <span>{liquidation.liquidator}</span>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        <div className="flex items-center justify-end gap-1">
+                          <span>{formatSimple(Number(formatUnits(BigInt(liquidation.repaidAssets), market.loanAsset.decimals)))}</span>
+                          {market?.loanAsset?.symbol && (
                             <TokenIcon
                               address={market.loanAsset.address}
                               chainId={market.morphoBlue.chain.id}
@@ -135,25 +106,57 @@ export function LiquidationsTable({ chainId, market }: LiquidationsTableProps) {
                               width={16}
                               height={16}
                             />
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        <div className="flex items-center justify-end gap-1">
+                          <span>
+                            {formatSimple(Number(formatUnits(BigInt(liquidation.seizedAssets), market.collateralAsset.decimals)))}
                           </span>
+                          {market?.collateralAsset?.symbol && (
+                            <TokenIcon
+                              address={market.collateralAsset.address}
+                              chainId={market.morphoBlue.chain.id}
+                              symbol={market.collateralAsset.symbol}
+                              width={16}
+                              height={16}
+                            />
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        {hasBadDebt ? (
+                          <div className="flex items-center justify-end gap-1">
+                            <span>{formatSimple(Number(formatUnits(BigInt(liquidation.badDebtAssets), market.loanAsset.decimals)))}</span>
+                            {market?.loanAsset?.symbol && (
+                              <TokenIcon
+                                address={market.loanAsset.address}
+                                chainId={market.morphoBlue.chain.id}
+                                symbol={market.loanAsset.symbol}
+                                width={16}
+                                height={16}
+                              />
+                            )}
+                          </div>
+                        ) : (
+                          <div className="flex items-center justify-end">-</div>
                         )}
-                      </>
-                    ) : (
-                      ' - '
-                    )}
-                  </TableCell>
-                  <TableCell>{moment.unix(liquidation.timestamp).fromNow()}</TableCell>
-                  <TableCell className="text-right">
-                    <TransactionIdentity
-                      txHash={liquidation.hash}
-                      chainId={chainId}
-                    />
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
+                      </TableCell>
+                      <TableCell className="text-sm text-gray-500">{moment.unix(liquidation.timestamp).fromNow()}</TableCell>
+                      <TableCell className="text-right text-sm text-gray-500">
+                        <TransactionIdentity
+                          txHash={liquidation.hash}
+                          chainId={chainId}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {totalCount > 0 && (
diff --git a/app/market/[chainId]/[marketid]/components/SuppliersTable.tsx b/app/market/[chainId]/[marketid]/components/SuppliersTable.tsx
index d73af9a1..bb12d7ee 100644
--- a/app/market/[chainId]/[marketid]/components/SuppliersTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/SuppliersTable.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react';
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Tooltip } from '@heroui/react';
+import { Tooltip } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import { FiFilter } from 'react-icons/fi';
 import type { Address } from 'viem';
 import { formatUnits } from 'viem';
@@ -101,59 +102,66 @@ export function SuppliersTable({ chainId, market, minShares, onOpenFiltersModal
           </div>
         )}
 
-        <Table
-          key={tableKey}
-          classNames={{
-            wrapper: 'bg-surface shadow-sm rounded',
-            table: 'bg-surface',
-          }}
-          aria-label="Market suppliers"
-        >
-          <TableHeader>
-            <TableColumn>ACCOUNT</TableColumn>
-            <TableColumn align="end">SUPPLIED</TableColumn>
-            <TableColumn align="end">% OF SUPPLY</TableColumn>
-          </TableHeader>
-          <TableBody
-            className="font-zen"
-            emptyContent={isLoading ? 'Loading...' : 'No suppliers found for this market'}
-            isLoading={isLoading}
+        <div className="bg-surface shadow-sm rounded overflow-hidden">
+          <Table
+            key={tableKey}
+            aria-label="Market suppliers"
           >
-            {suppliersWithAssets.map((supplier) => {
-              const totalSupply = BigInt(market.state.supplyAssets);
-              const supplierAssets = BigInt(supplier.supplyAssets);
-              const percentOfSupply = totalSupply > 0n ? (Number(supplierAssets) / Number(totalSupply)) * 100 : 0;
-              const percentDisplay = percentOfSupply < 0.01 && percentOfSupply > 0 ? '<0.01%' : `${percentOfSupply.toFixed(2)}%`;
-
-              return (
-                <TableRow key={`supplier-${supplier.userAddress}`}>
-                  <TableCell>
-                    <AccountIdentity
-                      address={supplier.userAddress as Address}
-                      variant="compact"
-                      linkTo="profile"
-                    />
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-left">ACCOUNT</TableHead>
+                <TableHead className="text-right">SUPPLIED</TableHead>
+                <TableHead className="text-right">% OF SUPPLY</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody className="table-body-compact">
+              {suppliersWithAssets.length === 0 && !isLoading ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={3}
+                    className="text-center text-gray-400"
+                  >
+                    No suppliers found for this market
                   </TableCell>
-                  <TableCell className="text-right">
-                    {formatSimple(Number(formatUnits(BigInt(supplier.supplyAssets), market.loanAsset.decimals)))}
-                    {market?.loanAsset?.symbol && (
-                      <span className="ml-1 inline-flex items-center">
-                        <TokenIcon
-                          address={market.loanAsset.address}
-                          chainId={market.morphoBlue.chain.id}
-                          symbol={market.loanAsset.symbol}
-                          width={16}
-                          height={16}
-                        />
-                      </span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">{percentDisplay}</TableCell>
                 </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
+              ) : (
+                suppliersWithAssets.map((supplier) => {
+                  const totalSupply = BigInt(market.state.supplyAssets);
+                  const supplierAssets = BigInt(supplier.supplyAssets);
+                  const percentOfSupply = totalSupply > 0n ? (Number(supplierAssets) / Number(totalSupply)) * 100 : 0;
+                  const percentDisplay = percentOfSupply < 0.01 && percentOfSupply > 0 ? '<0.01%' : `${percentOfSupply.toFixed(2)}%`;
+
+                  return (
+                    <TableRow key={`supplier-${supplier.userAddress}`}>
+                      <TableCell>
+                        <AccountIdentity
+                          address={supplier.userAddress as Address}
+                          variant="compact"
+                          linkTo="profile"
+                        />
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        <div className="flex items-center justify-end gap-1">
+                          <span>{formatSimple(Number(formatUnits(BigInt(supplier.supplyAssets), market.loanAsset.decimals)))}</span>
+                          {market?.loanAsset?.symbol && (
+                            <TokenIcon
+                              address={market.loanAsset.address}
+                              chainId={market.morphoBlue.chain.id}
+                              symbol={market.loanAsset.symbol}
+                              width={16}
+                              height={16}
+                            />
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right text-sm">{percentDisplay}</TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {totalCount > 0 && (
diff --git a/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx b/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
index 12a2acb1..2f8090a7 100644
--- a/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
+++ b/app/market/[chainId]/[marketid]/components/SuppliesTable.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Tooltip } from '@heroui/react';
+import { Tooltip } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import moment from 'moment';
 import { FiFilter } from 'react-icons/fi';
 import type { Address } from 'viem';
@@ -87,70 +88,72 @@ export function SuppliesTable({ chainId, market, minAssets, onOpenFiltersModal }
           </div>
         )}
 
-        <Table
-          key={tableKey}
-          classNames={{
-            wrapper: 'bg-surface shadow-sm rounded',
-            table: 'bg-surface',
-          }}
-          aria-label="Supply and withdraw activities"
-        >
-          <TableHeader>
-            <TableColumn>ACCOUNT</TableColumn>
-            <TableColumn>TYPE</TableColumn>
-            <TableColumn align="end">AMOUNT</TableColumn>
-            <TableColumn>TIME</TableColumn>
-            <TableColumn
-              className="font-mono"
-              align="end"
-            >
-              TRANSACTION
-            </TableColumn>
-          </TableHeader>
-          <TableBody
-            className="font-zen"
-            emptyContent={isLoading ? 'Loading...' : 'No supply activities found for this market'}
-            isLoading={isLoading}
+        <div className="bg-surface shadow-sm rounded overflow-hidden">
+          <Table
+            key={tableKey}
+            aria-label="Supply and withdraw activities"
           >
-            {supplies.map((supply) => (
-              <TableRow key={`supply-${supply.hash}-${supply.amount.toString()}`}>
-                <TableCell>
-                  <AccountIdentity
-                    address={supply.userAddress as Address}
-                    variant="compact"
-                    linkTo="profile"
-                  />
-                </TableCell>
-                <TableCell>
-                  <Badge variant={supply.type === 'MarketSupply' ? 'success' : 'danger'}>
-                    {supply.type === 'MarketSupply' ? 'Supply' : 'Withdraw'}
-                  </Badge>
-                </TableCell>
-                <TableCell className="text-right">
-                  {formatSimple(Number(formatUnits(BigInt(supply.amount), market.loanAsset.decimals)))}
-                  {market?.loanAsset?.symbol && (
-                    <span className="ml-1 inline-flex items-center">
-                      <TokenIcon
-                        address={market.loanAsset.address}
-                        chainId={market.morphoBlue.chain.id}
-                        symbol={market.loanAsset.symbol}
-                        width={16}
-                        height={16}
-                      />
-                    </span>
-                  )}
-                </TableCell>
-                <TableCell>{moment.unix(supply.timestamp).fromNow()}</TableCell>
-                <TableCell className="text-right">
-                  <TransactionIdentity
-                    txHash={supply.hash}
-                    chainId={chainId}
-                  />
-                </TableCell>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-left">ACCOUNT</TableHead>
+                <TableHead className="text-left">TYPE</TableHead>
+                <TableHead className="text-right">AMOUNT</TableHead>
+                <TableHead className="text-left">TIME</TableHead>
+                <TableHead className="text-right">TRANSACTION</TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody className="table-body-compact">
+              {supplies.length === 0 && !isLoading ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="text-center text-gray-400"
+                  >
+                    No supply activities found for this market
+                  </TableCell>
+                </TableRow>
+              ) : (
+                supplies.map((supply) => (
+                  <TableRow key={`supply-${supply.hash}-${supply.amount.toString()}`}>
+                    <TableCell>
+                      <AccountIdentity
+                        address={supply.userAddress as Address}
+                        variant="compact"
+                        linkTo="profile"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={supply.type === 'MarketSupply' ? 'success' : 'danger'}>
+                        {supply.type === 'MarketSupply' ? 'Supply' : 'Withdraw'}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      <div className="flex items-center justify-end gap-1">
+                        <span>{formatSimple(Number(formatUnits(BigInt(supply.amount), market.loanAsset.decimals)))}</span>
+                        {market?.loanAsset?.symbol && (
+                          <TokenIcon
+                            address={market.loanAsset.address}
+                            chainId={market.morphoBlue.chain.id}
+                            symbol={market.loanAsset.symbol}
+                            width={16}
+                            height={16}
+                          />
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm text-gray-500">{moment.unix(supply.timestamp).fromNow()}</TableCell>
+                    <TableCell className="text-right text-sm text-gray-500">
+                      <TransactionIdentity
+                        txHash={supply.hash}
+                        chainId={chainId}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
       </div>
 
       {totalCount > 0 && (
diff --git a/app/markets/components/MarketTableBody.tsx b/app/markets/components/MarketTableBody.tsx
index 573eb58a..ba7d7c4a 100644
--- a/app/markets/components/MarketTableBody.tsx
+++ b/app/markets/components/MarketTableBody.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { GoStarFill, GoStar } from 'react-icons/go';
+import { TableBody, TableRow, TableCell } from '@/components/ui/table';
 import { RateFormatted } from '@/components/common/RateFormatted';
 import { MarketIdBadge } from '@/components/MarketIdBadge';
 import { MarketIndicators } from '@/components/MarketIndicators';
@@ -93,19 +94,19 @@ export function MarketTableBody({
   };
 
   return (
-    <tbody className="table-body text-sm">
+    <TableBody className="text-sm">
       {currentEntries.map((item, index) => {
         const collatToShow = item.collateralAsset.symbol.slice(0, 6).concat(item.collateralAsset.symbol.length > 6 ? '...' : '');
         const isStared = staredIds.includes(item.uniqueKey);
 
         return (
           <React.Fragment key={index}>
-            <tr
+            <TableRow
               key={item.uniqueKey}
               onClick={() => setExpandedRowId(item.uniqueKey === expandedRowId ? null : item.uniqueKey)}
-              className={`hover:cursor-pointer ${item.uniqueKey === expandedRowId ? 'table-body-focused ' : ''}'`}
+              className={`hover:cursor-pointer ${item.uniqueKey === expandedRowId ? 'table-body-focused ' : ''}`}
             >
-              <td
+              <TableCell
                 data-label=""
                 className="z-50"
                 style={{ minWidth: '40px' }}
@@ -123,8 +124,8 @@ export function MarketTableBody({
                 >
                   <p className="text-lg text-orange-500 group-hover:opacity-100">{isStared ? <GoStarFill /> : <GoStar />}</p>
                 </button>
-              </td>
-              <td
+              </TableCell>
+              <TableCell
                 data-label="ID"
                 className="z-50"
                 style={{ minWidth: '80px' }}
@@ -143,7 +144,7 @@ export function MarketTableBody({
                     showNetworkIcon
                   />
                 </button>
-              </td>
+              </TableCell>
               <TDAsset
                 dataLabel="Loan"
                 asset={item.loanAsset.address}
@@ -156,7 +157,7 @@ export function MarketTableBody({
                 chainId={item.morphoBlue.chain.id}
                 symbol={collatToShow}
               />
-              <td
+              <TableCell
                 data-label="Oracle"
                 className="z-50"
                 style={{ minWidth: '90px' }}
@@ -167,22 +168,22 @@ export function MarketTableBody({
                     chainId={item.morphoBlue.chain.id}
                   />
                 </div>
-              </td>
-              <td
+              </TableCell>
+              <TableCell
                 data-label="LLTV"
                 className="z-50"
                 style={{ minWidth: '60px', padding: 5 }}
               >
                 {Number(item.lltv) / 1e16}%
-              </td>
+              </TableCell>
               {columnVisibility.trustedBy && (
-                <td
+                <TableCell
                   data-label="Trusted By"
                   className="z-50 text-center"
                   style={{ minWidth: '110px', paddingLeft: 6, paddingRight: 6 }}
                 >
                   <TrustedByCell vaults={getTrustedVaultsForMarket(item)} />
-                </td>
+                </TableCell>
               )}
               {columnVisibility.totalSupply && (
                 <TDTotalSupplyOrBorrow
@@ -212,48 +213,48 @@ export function MarketTableBody({
                 />
               )}
               {columnVisibility.supplyAPY && (
-                <td
+                <TableCell
                   data-label={supplyRateLabel}
                   style={{ minWidth: '85px', paddingLeft: 3, paddingRight: 3 }}
                 >
                   <APYCell market={item} />
-                </td>
+                </TableCell>
               )}
               {columnVisibility.borrowAPY && (
-                <td
+                <TableCell
                   data-label={borrowRateLabel}
                   className="z-50 text-center"
                   style={{ minWidth: '85px', paddingLeft: 3, paddingRight: 3 }}
                 >
                   <p className="text-sm">{item.state.borrowApy ? <RateFormatted value={item.state.borrowApy} /> : '—'}</p>
-                </td>
+                </TableCell>
               )}
               {columnVisibility.rateAtTarget && (
-                <td
+                <TableCell
                   data-label="Target Rate"
                   className="z-50 text-center"
                   style={{ minWidth: '85px', paddingLeft: 3, paddingRight: 3 }}
                 >
                   <p className="text-sm">{item.state.apyAtTarget ? <RateFormatted value={item.state.apyAtTarget} /> : '—'}</p>
-                </td>
+                </TableCell>
               )}
               {columnVisibility.utilizationRate && (
-                <td
+                <TableCell
                   data-label="Utilization"
                   className="z-50 text-center"
                   style={{ minWidth: '85px', paddingLeft: 3, paddingRight: 3 }}
                 >
                   <p className="text-sm">{`${(item.state.utilization * 100).toFixed(2)}%`}</p>
-                </td>
+                </TableCell>
               )}
-              <td style={{ minWidth: '90px' }}>
+              <TableCell style={{ minWidth: '90px' }}>
                 <div className="flex items-center justify-center gap-1">
                   <MarketAssetIndicator market={item} />
                   <MarketOracleIndicator market={item} />
                   <MarketDebtIndicator market={item} />
                 </div>
-              </td>
-              <td
+              </TableCell>
+              <TableCell
                 data-label="Indicators"
                 className="z-50"
                 style={{ maxWidth: '40px', padding: 0 }}
@@ -262,8 +263,8 @@ export function MarketTableBody({
                   market={item}
                   showRisk={false}
                 />
-              </td>
-              <td
+              </TableCell>
+              <TableCell
                 data-label="Actions"
                 className="justify-center px-4 py-3"
               >
@@ -280,12 +281,12 @@ export function MarketTableBody({
                     isBlacklisted={isBlacklisted}
                   />
                 </div>
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
             <AnimatePresence>
               {expandedRowId === item.uniqueKey && (
-                <tr className={`${item.uniqueKey === expandedRowId ? 'table-body-focused' : ''}`}>
-                  <td
+                <TableRow className={`${item.uniqueKey === expandedRowId ? 'table-body-focused' : ''}`}>
+                  <TableCell
                     className="collaps-viewer bg-hovered p-0"
                     colSpan={visibleColumnsCount}
                   >
@@ -301,13 +302,13 @@ export function MarketTableBody({
                         <ExpandedMarketDetail market={item} />
                       </div>
                     </motion.div>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               )}
             </AnimatePresence>
           </React.Fragment>
         );
       })}
-    </tbody>
+    </TableBody>
   );
 }
diff --git a/app/markets/components/MarketTableUtils.tsx b/app/markets/components/MarketTableUtils.tsx
index 13de6127..7df7f300 100644
--- a/app/markets/components/MarketTableUtils.tsx
+++ b/app/markets/components/MarketTableUtils.tsx
@@ -1,4 +1,5 @@
 import { ArrowDownIcon, ArrowUpIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
+import { TableHead, TableCell } from '@/components/ui/table';
 import { TokenIcon } from '@/components/TokenIcon';
 import { formatBalance, formatReadable } from '@/utils/balance';
 import { getAssetURL } from '@/utils/external';
@@ -17,7 +18,7 @@ export function HTSortable({ label, sortColumn, titleOnclick, sortDirection, tar
   const sortingCurrent = sortColumn === targetColumn;
 
   return (
-    <th
+    <TableHead
       className={`px-2 py-1 ${sortingCurrent ? 'text-primary' : ''}`}
       onClick={() => titleOnclick(targetColumn)}
       style={{ padding: '0.5rem' }}
@@ -26,13 +27,13 @@ export function HTSortable({ label, sortColumn, titleOnclick, sortDirection, tar
         <div>{label}</div>
         {showDirection && (sortingCurrent ? sortDirection === 1 ? <ArrowDownIcon /> : <ArrowUpIcon /> : null)}
       </div>
-    </th>
+    </TableHead>
   );
 }
 
 export function TDAsset({ asset, chainId, symbol, dataLabel }: { asset: string; chainId: number; symbol: string; dataLabel?: string }) {
   return (
-    <td
+    <TableCell
       data-label={dataLabel ?? symbol}
       className="z-50"
       style={{ minWidth: '9px' }}
@@ -57,7 +58,7 @@ export function TDAsset({ asset, chainId, symbol, dataLabel }: { asset: string;
           </p>
         </a>
       </div>
-    </td>
+    </TableCell>
   );
 }
 
@@ -75,13 +76,13 @@ export function TDTotalSupplyOrBorrow({
   symbol: string;
 }) {
   return (
-    <td
+    <TableCell
       data-label={dataLabel}
       className="z-50"
       style={{ minWidth: '120px' }}
     >
       <p className="z-50">${`${formatReadable(Number(assetsUSD))}   `} </p>
       <p className="z-50 opacity-70">{`${formatReadable(formatBalance(assets, decimals))} ${symbol}`}</p>
-    </td>
+    </TableCell>
   );
 }
diff --git a/app/markets/components/marketsTable.tsx b/app/markets/components/marketsTable.tsx
index 3cfb3731..33538880 100644
--- a/app/markets/components/marketsTable.tsx
+++ b/app/markets/components/marketsTable.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { FaRegStar, FaStar } from 'react-icons/fa';
+import { Table, TableHeader, TableRow, TableHead } from '@/components/ui/table';
 import { TablePagination } from '@/components/common/TablePagination';
 import type { TrustedVault } from '@/constants/vaults/known_vaults';
 import { useRateLabel } from '@/hooks/useRateLabel';
@@ -68,15 +69,17 @@ function MarketsTable({
   const totalPages = Math.ceil(markets.length / entriesPerPage);
 
   const containerClassName = ['flex flex-col gap-2 pb-4', className].filter((value): value is string => Boolean(value)).join(' ');
-  const tableWrapperClassName = ['overflow-x-auto', wrapperClassName].filter((value): value is string => Boolean(value)).join(' ');
-  const tableClassNames = ['responsive rounded-md font-zen', tableClassName].filter((value): value is string => Boolean(value)).join(' ');
+  const tableWrapperClassName = ['bg-surface shadow-sm rounded overflow-hidden', wrapperClassName]
+    .filter((value): value is string => Boolean(value))
+    .join(' ');
+  const tableClassNames = ['responsive', tableClassName].filter((value): value is string => Boolean(value)).join(' ');
 
   return (
     <div className={containerClassName}>
       <div className={tableWrapperClassName}>
-        <table className={tableClassNames}>
-          <thead className="table-header">
-            <tr>
+        <Table className={tableClassNames}>
+          <TableHeader>
+            <TableRow>
               <HTSortable
                 label={sortColumn === 0 ? <FaStar /> : <FaRegStar />}
                 sortColumn={sortColumn}
@@ -85,7 +88,7 @@ function MarketsTable({
                 targetColumn={SortColumn.Starred}
                 showDirection={false}
               />
-              <th className="font-normal px-2 py-2 whitespace-nowrap"> Id </th>
+              <TableHead className="font-normal px-2 py-2 whitespace-nowrap"> Id </TableHead>
               <HTSortable
                 label="Loan"
                 sortColumn={sortColumn}
@@ -100,7 +103,7 @@ function MarketsTable({
                 sortDirection={sortDirection}
                 targetColumn={SortColumn.CollateralAsset}
               />
-              <th className="font-normal px-2 py-2 whitespace-nowrap">Oracle</th>
+              <TableHead className="font-normal px-2 py-2 whitespace-nowrap">Oracle</TableHead>
               <HTSortable
                 label="LLTV"
                 sortColumn={sortColumn}
@@ -180,29 +183,29 @@ function MarketsTable({
                   targetColumn={SortColumn.UtilizationRate}
                 />
               )}
-              <th
+              <TableHead
                 className="font-normal px-2 py-2 whitespace-nowrap"
                 style={{ padding: '0.35rem 0.8rem' }}
               >
                 {' '}
                 Risk{' '}
-              </th>
-              <th
+              </TableHead>
+              <TableHead
                 className="font-normal px-2 py-2 whitespace-nowrap"
                 style={{ padding: '0.35rem 0.8rem' }}
               >
                 {' '}
                 Indicators{' '}
-              </th>
-              <th
+              </TableHead>
+              <TableHead
                 className="font-normal px-2 py-2 whitespace-nowrap"
                 style={{ padding: '0.35rem 0.8rem' }}
               >
                 {' '}
                 Actions{' '}
-              </th>
-            </tr>
-          </thead>
+              </TableHead>
+            </TableRow>
+          </TableHeader>
           <MarketTableBody
             currentEntries={currentEntries}
             staredIds={staredIds}
@@ -218,7 +221,7 @@ function MarketsTable({
             addBlacklistedMarket={addBlacklistedMarket}
             isBlacklisted={isBlacklisted}
           />
-        </table>
+        </Table>
       </div>
       <TablePagination
         totalPages={totalPages}
diff --git a/app/positions/components/FromMarketsTable.tsx b/app/positions/components/FromMarketsTable.tsx
index aa5e8ab8..118e2f9c 100644
--- a/app/positions/components/FromMarketsTable.tsx
+++ b/app/positions/components/FromMarketsTable.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Pagination } from '@heroui/react';
 import { Button } from '@/components/ui/button';
+import { TablePagination } from '@/components/common/TablePagination';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/components/MarketIdentity';
 import { useMarkets } from '@/hooks/useMarkets';
 import { useRateLabel } from '@/hooks/useRateLabel';
@@ -48,22 +49,22 @@ export function FromMarketsTable({ positions, selectedMarketUniqueKey, onSelectM
       ) : (
         <>
           <div className="w-full overflow-x-auto">
-            <table className="w-full table-fixed rounded-sm font-zen text-sm">
+            <Table className="w-full table-fixed rounded-sm font-zen text-sm">
               <colgroup>
                 <col className="w-auto" />
                 <col className="w-[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-right">{rateLabel}</th>
-                  <th className="px-4 py-2 text-right">Util</th>
-                  <th className="px-4 py-2 text-left">Supplied Amount</th>
-                </tr>
-              </thead>
-              <tbody>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="px-4 py-2 text-left">Market</TableHead>
+                  <TableHead className="px-4 py-2 text-right">{rateLabel}</TableHead>
+                  <TableHead className="px-4 py-2 text-right">Util</TableHead>
+                  <TableHead className="px-4 py-2 text-left">Supplied Amount</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
                 {paginatedPositions.map((position) => {
                   const userConfirmedSupply = BigInt(position.state.supplyAssets);
                   const pendingDeltaBigInt = BigInt(position.pendingDelta);
@@ -77,14 +78,14 @@ export function FromMarketsTable({ positions, selectedMarketUniqueKey, onSelectM
                   const isSelected = position.market.uniqueKey === selectedMarketUniqueKey;
                   const apyPreview = getApyPreview(position);
                   return (
-                    <tr
+                    <TableRow
                       key={position.market.uniqueKey}
                       onClick={() => onSelectMarket(position.market.uniqueKey)}
                       className={`cursor-pointer border-b border-l-2 border-l-transparent border-gray-200 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800 ${
                         isSelected ? 'bg-primary/5 border-l-primary' : ''
                       }`}
                     >
-                      <td className="px-4 py-2">
+                      <TableCell className="px-4 py-2">
                         <div className="flex items-center justify-start">
                           <MarketIdentity
                             market={position.market}
@@ -98,8 +99,8 @@ export function FromMarketsTable({ positions, selectedMarketUniqueKey, onSelectM
                             showExplorerLink={false}
                           />
                         </div>
-                      </td>
-                      <td className="px-4 py-2 text-right">
+                      </TableCell>
+                      <TableCell className="px-4 py-2 text-right">
                         {apyPreview ? (
                           <span className="whitespace-nowrap text-sm text-foreground">
                             <span className="line-through opacity-50">
@@ -121,8 +122,8 @@ export function FromMarketsTable({ positions, selectedMarketUniqueKey, onSelectM
                             %
                           </span>
                         )}
-                      </td>
-                      <td className="px-4 py-2 text-right">
+                      </TableCell>
+                      <TableCell 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>
@@ -134,8 +135,8 @@ export function FromMarketsTable({ positions, selectedMarketUniqueKey, onSelectM
                             {formatReadable(position.market.state.utilization * 100)}%
                           </span>
                         )}
-                      </td>
-                      <td className="px-4 py-2">
+                      </TableCell>
+                      <TableCell className="px-4 py-2">
                         <div className="flex items-center gap-2 justify-end">
                           <div>
                             {formatReadable(
@@ -160,24 +161,22 @@ export function FromMarketsTable({ positions, selectedMarketUniqueKey, onSelectM
                             Max
                           </Button>
                         </div>
-                      </td>
-                    </tr>
+                      </TableCell>
+                    </TableRow>
                   );
                 })}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           </div>
 
           {totalPages > 1 && (
-            <div className="flex justify-center">
-              <Pagination
-                total={totalPages}
-                page={currentPage}
-                onChange={setCurrentPage}
-                color="primary"
-                size="sm"
-              />
-            </div>
+            <TablePagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              totalEntries={positions.length}
+              pageSize={PER_PAGE}
+              onPageChange={setCurrentPage}
+            />
           )}
         </>
       )}
diff --git a/app/positions/components/PositionsSummaryTable.tsx b/app/positions/components/PositionsSummaryTable.tsx
index ee04e668..df3474fe 100644
--- a/app/positions/components/PositionsSummaryTable.tsx
+++ b/app/positions/components/PositionsSummaryTable.tsx
@@ -10,6 +10,7 @@ import { IoChevronDownOutline } from 'react-icons/io5';
 import { PiHandCoins } from 'react-icons/pi';
 import { PulseLoader } from 'react-spinners';
 import { useConnection } from 'wagmi';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { Button } from '@/components/ui/button';
 import { TokenIcon } from '@/components/TokenIcon';
 import { TooltipContent } from '@/components/TooltipContent';
@@ -281,15 +282,15 @@ export function PositionsSummaryTable({
           </DropdownMenu>
         </Dropdown>
       </div>
-      <div className="bg-surface overflow-hidden rounded">
-        <table className="responsive w-full min-w-[640px] font-zen">
-          <thead className="table-header">
-            <tr className="w-full justify-center text-secondary">
-              <th className="w-10" />
-              <th className="w-10">Network</th>
-              <th className="text-center">Size</th>
-              <th className="text-center">{rateLabel} (now)</th>
-              <th className="text-center">
+      <div className="bg-surface overflow-hidden rounded shadow-sm">
+        <Table className="responsive w-full min-w-[640px]">
+          <TableHeader>
+            <TableRow className="w-full justify-center text-secondary">
+              <TableHead className="w-10" />
+              <TableHead className="w-10">Network</TableHead>
+              <TableHead>Size</TableHead>
+              <TableHead>{rateLabel} (now)</TableHead>
+              <TableHead>
                 <span className="inline-flex items-center gap-1">
                   Interest Accrued ({earningsPeriod})
                   <Tooltip
@@ -310,13 +311,13 @@ export function PositionsSummaryTable({
                     </div>
                   </Tooltip>
                 </span>
-              </th>
-              <th className="text-center">Collateral</th>
-              <th className="text-center">Warnings</th>
-              <th className="text-center">Actions</th>
-            </tr>
-          </thead>
-          <tbody className="table-body text-sm">
+              </TableHead>
+              <TableHead>Collateral</TableHead>
+              <TableHead>Warnings</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="text-sm">
             {processedPositions.map((groupedPosition) => {
               const rowKey = `${groupedPosition.loanAssetAddress}-${groupedPosition.chainId}`;
               const isExpanded = expandedRows.has(rowKey);
@@ -326,12 +327,12 @@ export function PositionsSummaryTable({
 
               return (
                 <React.Fragment key={rowKey}>
-                  <tr
+                  <TableRow
                     className="cursor-pointer hover:bg-gray-50"
                     onClick={() => toggleRow(rowKey)}
                   >
-                    <td className="w-10 text-center">{isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}</td>
-                    <td className="w-10">
+                    <TableCell className="w-10 text-center">{isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}</TableCell>
+                    <TableCell className="w-10">
                       <div className="flex items-center justify-center">
                         <Image
                           src={getNetworkImg(groupedPosition.chainId) ?? ''}
@@ -340,8 +341,8 @@ export function PositionsSummaryTable({
                           height={24}
                         />
                       </div>
-                    </td>
-                    <td data-label="Size">
+                    </TableCell>
+                    <TableCell data-label="Size">
                       <div className="flex items-center justify-center gap-2">
                         <span className="font-medium">{formatReadable(groupedPosition.totalSupply)}</span>
                         <span>{groupedPosition.loanAsset}</span>
@@ -353,13 +354,13 @@ export function PositionsSummaryTable({
                           height={16}
                         />
                       </div>
-                    </td>
-                    <td data-label={`${rateLabel} (now)`}>
+                    </TableCell>
+                    <TableCell data-label={`${rateLabel} (now)`}>
                       <div className="flex items-center justify-center">
                         <span className="font-medium">{formatReadable((isAprDisplay ? convertApyToApr(avgApy) : avgApy) * 100)}%</span>
                       </div>
-                    </td>
-                    <td data-label={`Interest Accrued (${earningsPeriod})`}>
+                    </TableCell>
+                    <TableCell data-label={`Interest Accrued (${earningsPeriod})`}>
                       <div className="flex items-center justify-center gap-2">
                         {isLoadingEarnings ? (
                           <div className="flex items-center justify-center">
@@ -382,8 +383,8 @@ export function PositionsSummaryTable({
                           </span>
                         )}
                       </div>
-                    </td>
-                    <td data-label="Collateral">
+                    </TableCell>
+                    <TableCell data-label="Collateral">
                       <div className="flex items-center justify-center gap-1">
                         {groupedPosition.collaterals.length > 0 ? (
                           groupedPosition.collaterals
@@ -403,16 +404,16 @@ export function PositionsSummaryTable({
                           <span className="text-sm text-gray-500">No known collaterals</span>
                         )}
                       </div>
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       data-label="Warnings"
                       className="align-middle"
                     >
                       <div className="flex items-center justify-center gap-1">
                         <AggregatedRiskIndicators groupedPosition={groupedPosition} />
                       </div>
-                    </td>
-                    <td
+                    </TableCell>
+                    <TableCell
                       data-label="Actions"
                       className="justify-center px-4 py-3"
                     >
@@ -434,12 +435,12 @@ export function PositionsSummaryTable({
                           Rebalance
                         </Button>
                       </div>
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                   <AnimatePresence>
                     {expandedRows.has(rowKey) && (
-                      <tr className="bg-surface">
-                        <td
+                      <TableRow className="bg-surface">
+                        <TableCell
                           colSpan={10}
                           className="bg-surface"
                         >
@@ -459,15 +460,15 @@ export function PositionsSummaryTable({
                               showCollateralExposure={showCollateralExposure}
                             />
                           </motion.div>
-                        </td>
-                      </tr>
+                        </TableCell>
+                      </TableRow>
                     )}
                   </AnimatePresence>
                 </React.Fragment>
               );
             })}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
       {showRebalanceModal && selectedGroupedPosition && (
         <RebalanceModal
diff --git a/app/positions/components/SuppliedMarketsDetail.tsx b/app/positions/components/SuppliedMarketsDetail.tsx
index 9c370cbd..d70a7090 100644
--- a/app/positions/components/SuppliedMarketsDetail.tsx
+++ b/app/positions/components/SuppliedMarketsDetail.tsx
@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { RateFormatted } from '@/components/common/RateFormatted';
 import { MarketIdBadge } from '@/components/MarketIdBadge';
 import { MarketIdentity, MarketIdentityFocus, MarketIdentityMode } from '@/components/MarketIdentity';
@@ -36,11 +37,11 @@ function MarketRow({
   const percentageOfPortfolio = totalSupply > 0 ? (suppliedAmount / totalSupply) * 100 : 0;
 
   return (
-    <tr
+    <TableRow
       key={position.market.uniqueKey}
       className="gap-1"
     >
-      <td
+      <TableCell
         data-label="Market"
         className="text-center"
       >
@@ -51,8 +52,8 @@ function MarketRow({
             showNetworkIcon={false}
           />
         </div>
-      </td>
-      <td
+      </TableCell>
+      <TableCell
         data-label="Market Detail"
         className="align-middle p-4"
       >
@@ -63,20 +64,20 @@ function MarketRow({
           chainId={position.market.morphoBlue.chain.id}
           wide
         />
-      </td>
-      <td
+      </TableCell>
+      <TableCell
         data-label={rateLabel}
         className="text-center"
       >
         <RateFormatted value={position.market.state.supplyApy} />
-      </td>
-      <td
+      </TableCell>
+      <TableCell
         data-label="Supplied"
         className="text-center"
       >
         {formatReadable(suppliedAmount)} {position.market.loanAsset.symbol}
-      </td>
-      <td
+      </TableCell>
+      <TableCell
         data-label="% of Portfolio"
         className="text-center"
       >
@@ -89,8 +90,8 @@ function MarketRow({
           </div>
           <span className="whitespace-nowrap">{formatReadable(percentageOfPortfolio)}%</span>
         </div>
-      </td>
-      <td
+      </TableCell>
+      <TableCell
         data-label="Indicators"
         className="text-center"
       >
@@ -98,8 +99,8 @@ function MarketRow({
           market={position.market}
           showRisk
         />
-      </td>
-      <td
+      </TableCell>
+      <TableCell
         data-label="Actions"
         className="justify-center px-4 py-3"
       >
@@ -125,8 +126,8 @@ function MarketRow({
             Supply
           </Button>
         </div>
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 }
 
@@ -203,19 +204,19 @@ export function SuppliedMarketsDetail({
         )}
 
         {/* Markets Table - Always visible */}
-        <table className="no-hover-effect w-full font-zen">
-          <thead className="table-header">
-            <tr>
-              <th>Market</th>
-              <th> Collateral & Parameters </th>
-              <th>{rateLabel}</th>
-              <th>Supplied</th>
-              <th>% of Portfolio</th>
-              <th>Indicators</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody className="table-body text-xs">
+        <Table className="no-hover-effect w-full font-zen">
+          <TableHeader className="">
+            <TableRow>
+              <TableHead>Market</TableHead>
+              <TableHead> Collateral & Parameters </TableHead>
+              <TableHead>{rateLabel}</TableHead>
+              <TableHead>Supplied</TableHead>
+              <TableHead>% of Portfolio</TableHead>
+              <TableHead>Indicators</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="text-xs">
             {filteredMarkets.map((position) => (
               <MarketRow
                 key={position.market.uniqueKey}
@@ -227,8 +228,8 @@ export function SuppliedMarketsDetail({
                 rateLabel={rateLabel}
               />
             ))}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
     </motion.div>
   );
diff --git a/app/positions/components/onboarding/SetupPositions.tsx b/app/positions/components/onboarding/SetupPositions.tsx
index 1dc8f7c1..41e8a45a 100644
--- a/app/positions/components/onboarding/SetupPositions.tsx
+++ b/app/positions/components/onboarding/SetupPositions.tsx
@@ -4,6 +4,7 @@ import { LockClosedIcon, LockOpen1Icon } from '@radix-ui/react-icons';
 import Image from 'next/image';
 import { formatUnits, parseUnits } from 'viem';
 import { Button } from '@/components/ui/button';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
 import { ExecuteTransactionButton } from '@/components/ui/ExecuteTransactionButton';
 import Input from '@/components/Input/Input';
 import { MarketIdentity, MarketIdentityMode, MarketIdentityFocus } from '@/components/MarketIdentity';
@@ -252,26 +253,26 @@ export function SetupPositions() {
 
       {/* Markets Distribution */}
       <div className="mt-6 h-96 overflow-y-auto">
-        <table className="responsive w-full rounded-md font-zen">
-          <thead className="table-header">
-            <tr>
-              <th className="font-normal">Market</th>
-              <th className="font-normal">{rateLabel}</th>
-              <th className="font-normal">Distribution</th>
-            </tr>
-          </thead>
-          <tbody className="table-body text-sm">
+        <Table className="responsive w-full rounded-md font-zen">
+          <TableHeader className="">
+            <TableRow>
+              <TableHead className="font-normal">Market</TableHead>
+              <TableHead className="font-normal">{rateLabel}</TableHead>
+              <TableHead className="font-normal">Distribution</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="text-sm">
             {selectedMarkets.map((market) => {
               const currentPercentage = percentages[market.uniqueKey] ?? 0;
               const isLocked = lockedAmounts.has(market.uniqueKey);
 
               return (
-                <tr
+                <TableRow
                   key={market.uniqueKey}
                   className="hover:bg-hovered"
                 >
                   {/* Market Identity */}
-                  <td
+                  <TableCell
                     data-label="Market"
                     className="z-50"
                     style={{ width: '280px' }}
@@ -286,15 +287,15 @@ export function SetupPositions() {
                       iconSize={18}
                       showExplorerLink
                     />
-                  </td>
+                  </TableCell>
 
                   {/* APY/APR */}
-                  <td data-label={rateLabel}>
+                  <TableCell data-label={rateLabel}>
                     <APYCell market={market} />
-                  </td>
+                  </TableCell>
 
                   {/* Distribution Controls */}
-                  <td
+                  <TableCell
                     data-label="Distribution"
                     className="z-50"
                   >
@@ -335,12 +336,12 @@ export function SetupPositions() {
                         </button>
                       </div>
                     </div>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               );
             })}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
 
       {error && <div className="mt-4 text-sm text-red-500">{error}</div>}
diff --git a/app/positions/report/components/ReportTable.tsx b/app/positions/report/components/ReportTable.tsx
index b3d89a8b..12e2921f 100644
--- a/app/positions/report/components/ReportTable.tsx
+++ b/app/positions/report/components/ReportTable.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import type { DateValue } from '@heroui/react';
-import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import { getLocalTimeZone } from '@internationalized/date';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import { useDateFormatter } from '@react-aria/i18n';
@@ -262,19 +262,15 @@ export function ReportTable({ report, asset, startDate, endDate, chainId }: Repo
 
                       {/* Transactions Table */}
                       {marketReport.transactions.length > 0 && (
-                        <div className="bg-surface">
-                          <Table
-                            aria-label="Market transactions"
-                            classNames={{
-                              th: 'bg-surface',
-                              wrapper: 'rounded-none shadow-none bg-surface',
-                            }}
-                          >
+                        <div className="bg-surface rounded-none shadow-none">
+                          <Table aria-label="Market transactions">
                             <TableHeader>
-                              <TableColumn>TYPE</TableColumn>
-                              <TableColumn>DATE</TableColumn>
-                              <TableColumn>AMOUNT</TableColumn>
-                              <TableColumn>TX</TableColumn>
+                              <TableRow>
+                                <TableHead>TYPE</TableHead>
+                                <TableHead>DATE</TableHead>
+                                <TableHead>AMOUNT</TableHead>
+                                <TableHead>TX</TableHead>
+                              </TableRow>
                             </TableHeader>
                             <TableBody>
                               {marketReport.transactions.map((tx) => (
diff --git a/app/rewards/components/RewardTable.tsx b/app/rewards/components/RewardTable.tsx
index 8fa866e4..a05c8f57 100644
--- a/app/rewards/components/RewardTable.tsx
+++ b/app/rewards/components/RewardTable.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useMemo, useState } from 'react';
 import { ExternalLinkIcon } from '@radix-ui/react-icons';
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from '@/components/ui/table';
 import Image from 'next/image';
 import Link from 'next/link';
 import type { Address } from 'viem';
@@ -15,8 +15,8 @@ import { useClaimMerklRewards } from '@/hooks/useClaimMerklRewards';
 import { useStyledToast } from '@/hooks/useStyledToast';
 import { useTransactionWithToast } from '@/hooks/useTransactionWithToast';
 import { formatBalance, formatSimple } from '@/utils/balance';
-import { getAssetURL, getMerklCampaignURL } from '@/utils/external';
-import { getNetworkImg } from '@/utils/networks';
+import { getMerklCampaignURL } from '@/utils/external';
+import { getNetworkImg, getNetworkName } from '@/utils/networks';
 import { findToken } from '@/utils/tokens';
 import type { AggregatedRewardType } from '@/utils/types';
 
@@ -137,147 +137,147 @@ export default function RewardTable({ rewards, distributions, merklRewardsWithPr
 
   return (
     <div className="pb-4">
-      <Table
-        classNames={{
-          wrapper: 'bg-surface shadow-sm rounded',
-          table: 'bg-surface',
-        }}
-        aria-label="Rewards table"
-      >
-        <TableHeader>
-          <TableColumn>ASSET</TableColumn>
-          <TableColumn>CHAIN</TableColumn>
-          <TableColumn>CLAIMABLE</TableColumn>
-          <TableColumn>CAMPAIGN</TableColumn>
-          <TableColumn align="end">ACTIONS</TableColumn>
-        </TableHeader>
-        <TableBody className="font-zen">
-          {filteredRewardTokens
-            .filter((tokenReward) => tokenReward !== null && tokenReward !== undefined)
-            .map((tokenReward, index) => {
-              // try find the reward token, default to 18 decimals for unknown tokens
-              const matchedToken = findToken(tokenReward.asset.address, tokenReward.asset.chain_id) ?? {
-                symbol: 'Unknown',
-                img: undefined,
-                decimals: 18,
-              };
+      <div className="bg-surface shadow-sm rounded overflow-hidden">
+        <Table aria-label="Rewards table">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-left">ASSET</TableHead>
+              <TableHead className="text-center">CHAIN</TableHead>
+              <TableHead className="text-right">CLAIMABLE</TableHead>
+              <TableHead className="text-center">CAMPAIGN</TableHead>
+              <TableHead className="text-right">ACTIONS</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody className="table-body-compact">
+            {filteredRewardTokens
+              .filter((tokenReward) => tokenReward !== null && tokenReward !== undefined)
+              .map((tokenReward, index) => {
+                // try find the reward token, default to 18 decimals for unknown tokens
+                const matchedToken = findToken(tokenReward.asset.address, tokenReward.asset.chain_id) ?? {
+                  symbol: 'Unknown',
+                  img: undefined,
+                  decimals: 18,
+                };
 
-              const distribution = distributions.find(
-                (d) =>
-                  d.asset.address.toLowerCase() === tokenReward.asset.address.toLowerCase() &&
-                  d.asset.chain_id === tokenReward.asset.chain_id,
-              );
+                const distribution = distributions.find(
+                  (d) =>
+                    d.asset.address.toLowerCase() === tokenReward.asset.address.toLowerCase() &&
+                    d.asset.chain_id === tokenReward.asset.chain_id,
+                );
 
-              const isMerklReward = tokenReward.programs.includes('merkl');
+                const isMerklReward = tokenReward.programs.includes('merkl');
 
-              // Find matching campaign for this reward
-              const matchedCampaign = campaigns.find(
-                (c) =>
-                  c.rewardToken.address.toLowerCase() === tokenReward.asset.address.toLowerCase() &&
-                  c.chainId === tokenReward.asset.chain_id,
-              );
+                // Find matching campaign for this reward
+                const matchedCampaign = campaigns.find(
+                  (c) =>
+                    c.rewardToken.address.toLowerCase() === tokenReward.asset.address.toLowerCase() &&
+                    c.chainId === tokenReward.asset.chain_id,
+                );
 
-              // Create unique key for tracking claim status
-              const rewardKey = `${tokenReward.asset.address.toLowerCase()}-${tokenReward.asset.chain_id}`;
-              const isThisRewardClaiming = claimingRewardKey === rewardKey;
+                // Create unique key for tracking claim status
+                const rewardKey = `${tokenReward.asset.address.toLowerCase()}-${tokenReward.asset.chain_id}`;
+                const isThisRewardClaiming = claimingRewardKey === rewardKey;
 
-              return (
-                <TableRow key={index}>
-                  <TableCell>
-                    <Link
-                      href={getAssetURL(tokenReward.asset.address, tokenReward.asset.chain_id)}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-2 no-underline hover:opacity-80"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <span>{matchedToken.symbol}</span>
-                      <TokenIcon
-                        address={tokenReward.asset.address}
-                        chainId={tokenReward.asset.chain_id}
-                        width={20}
-                        height={20}
-                      />
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    {getNetworkImg(tokenReward.asset.chain_id) ? (
-                      <Image
-                        src={getNetworkImg(tokenReward.asset.chain_id) as string}
-                        alt={`Chain ${tokenReward.asset.chain_id}`}
-                        width={20}
-                        height={20}
-                      />
-                    ) : (
-                      <div
-                        className="rounded-full bg-gray-300 dark:bg-gray-700"
-                        style={{ width: 20, height: 20 }}
-                      />
-                    )}
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <span>{formatSimple(formatBalance(tokenReward.total.claimable, matchedToken.decimals))}</span>
-                      <TokenIcon
-                        address={tokenReward.asset.address}
-                        chainId={tokenReward.asset.chain_id}
-                        width={16}
-                        height={16}
-                      />
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    {matchedCampaign ? (
-                      <Link
-                        href={getMerklCampaignURL(
-                          matchedCampaign.chainId,
-                          matchedCampaign.type,
-                          matchedCampaign.type === 'MORPHOSUPPLY_SINGLETOKEN'
-                            ? (matchedCampaign.targetToken?.address ?? matchedCampaign.campaignId)
-                            : matchedCampaign.marketId.slice(0, 42),
+                const networkImg = getNetworkImg(tokenReward.asset.chain_id);
+                const networkName = getNetworkName(tokenReward.asset.chain_id);
+
+                return (
+                  <TableRow key={index}>
+                    <TableCell>
+                      <div className="flex items-center gap-1">
+                        <TokenIcon
+                          address={tokenReward.asset.address}
+                          chainId={tokenReward.asset.chain_id}
+                          width={16}
+                          height={16}
+                        />
+                        <span className="text-sm">{matchedToken.symbol}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-center">
+                        <div className="flex items-center gap-1 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-700">
+                          {networkImg && (
+                            <Image
+                              src={networkImg}
+                              alt="network"
+                              width="16"
+                              height="16"
+                              className="rounded-full"
+                            />
+                          )}
+                          <span className="text-xs text-gray-600 dark:text-gray-300">{networkName}</span>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      <div className="flex items-center justify-end gap-1">
+                        <TokenIcon
+                          address={tokenReward.asset.address}
+                          chainId={tokenReward.asset.chain_id}
+                          width={16}
+                          height={16}
+                        />
+                        <span>{formatSimple(formatBalance(tokenReward.total.claimable, matchedToken.decimals))}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-center">
+                        {matchedCampaign ? (
+                          <Link
+                            href={getMerklCampaignURL(
+                              matchedCampaign.chainId,
+                              matchedCampaign.type,
+                              matchedCampaign.type === 'MORPHOSUPPLY_SINGLETOKEN'
+                                ? (matchedCampaign.targetToken?.address ?? matchedCampaign.campaignId)
+                                : matchedCampaign.marketId.slice(0, 42),
+                            )}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-1 text-sm hover:opacity-80 no-underline"
+                          >
+                            view
+                            <ExternalLinkIcon className="h-3 w-3" />
+                          </Link>
+                        ) : (
+                          <span className="text-sm text-gray-400">-</span>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-end">
+                        {isMerklReward ? (
+                          <Button
+                            onClick={() => handleMerklClaim(tokenReward.asset.address, tokenReward.asset.chain_id)}
+                            variant="surface"
+                            size="sm"
+                            disabled={tokenReward.total.claimable === BigInt(0) || isThisRewardClaiming}
+                            isLoading={isThisRewardClaiming}
+                          >
+                            {isThisRewardClaiming && claimStatus === 'switching'
+                              ? 'Switching...'
+                              : isThisRewardClaiming && (claimStatus === 'pending' || claimStatus === 'preparing')
+                                ? 'Claiming...'
+                                : 'Claim'}
+                          </Button>
+                        ) : (
+                          <Button
+                            onClick={() => handleClaim(distribution)}
+                            variant="surface"
+                            size="sm"
+                            disabled={tokenReward.total.claimable === BigInt(0) || distribution === undefined}
+                          >
+                            Claim
+                          </Button>
                         )}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 text-sm hover:opacity-80 no-underline"
-                      >
-                        Details
-                        <ExternalLinkIcon className="h-3 w-3" />
-                      </Link>
-                    ) : (
-                      <span className="text-sm text-gray-400">-</span>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {isMerklReward ? (
-                      <Button
-                        onClick={() => handleMerklClaim(tokenReward.asset.address, tokenReward.asset.chain_id)}
-                        variant="surface"
-                        size="sm"
-                        disabled={tokenReward.total.claimable === BigInt(0) || isThisRewardClaiming}
-                        isLoading={isThisRewardClaiming}
-                      >
-                        {isThisRewardClaiming && claimStatus === 'switching'
-                          ? 'Switching...'
-                          : isThisRewardClaiming && (claimStatus === 'pending' || claimStatus === 'preparing')
-                            ? 'Claiming...'
-                            : 'Claim'}
-                      </Button>
-                    ) : (
-                      <Button
-                        onClick={() => handleClaim(distribution)}
-                        variant="surface"
-                        size="sm"
-                        disabled={tokenReward.total.claimable === BigInt(0) || distribution === undefined}
-                      >
-                        Claim
-                      </Button>
-                    )}
-                  </TableCell>
-                </TableRow>
-              );
-            })}
-        </TableBody>
-      </Table>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+          </TableBody>
+        </Table>
+      </div>
     </div>
   );
 }
diff --git a/docs/Styling.md b/docs/Styling.md
index 7fdd7cae..5572674a 100644
--- a/docs/Styling.md
+++ b/docs/Styling.md
@@ -465,6 +465,61 @@ Add an action link (like explorer) in the top-right corner:
 - Render token avatars with `TokenIcon` (`@/components/TokenIcon`) so chain-specific fallbacks, glyph sizing, and tooltips stay consistent.
 - Display oracle provenance data with `OracleVendorBadge` (`@/components/OracleVendorBadge`) instead of plain text to benefit from vendor icons, warnings, and tooltips.
 
+### Table Component
+
+**Always use Table components from `@/components/ui/table`** - never use raw HTML `<table>` tags.
+
+**Components:**
+```tsx
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
+import { TablePagination } from '@/components/common/TablePagination';
+```
+
+**Basic Usage:**
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="text-left">Name</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody className="table-body-compact">
+    <TableRow>
+      <TableCell>John</TableCell>
+      <TableCell className="text-right">$100</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+
+{/* Pagination - always use TablePagination */}
+<TablePagination
+  currentPage={page}
+  totalPages={totalPages}
+  totalEntries={items.length}
+  pageSize={10}
+  onPageChange={setPage}
+  isLoading={loading}
+/>
+```
+
+**Key Rules:**
+
+1. **Variants**: Use `table-body-compact` on `<TableBody>` for activity/transaction tables (adds 6px cushion vs standard padding)
+2. **Alignment**: Headers and cells must match - use `text-left`, `text-right`, or `text-center`
+3. **Amount Columns**: Use flexbox with `justify-end` for right-aligned token icons, and use `text-sm` for text:
+   ```tsx
+   <TableCell>
+     <div className="flex items-center justify-end gap-1 text-sm">
+       <span>{amount}</span>
+       <TokenIcon width={16} height={16} />
+     </div>
+   </TableCell>
+   ```
+4. **Pagination**: Always use `TablePagination` component (not HeroUI `Pagination`)
+
+**Styling:** All styling applied via `app/global.css` - don't add inline styles or override padding.
+
 ### TablePagination Component
 
 **TablePagination** (`@/components/common/TablePagination`)
diff --git a/package.json b/package.json
index 372b5515..24811f9f 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "@heroui/input": "^2.2.2",
     "@heroui/react": "^2.4.2",
     "@heroui/system": "^2.2.2",
-    "@heroui/table": "^2.0.36",
     "@heroui/theme": "^2.2.6",
     "@heroui/tooltip": "^2.0.36",
     "@internationalized/date": "^3.8.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e694ab6c..8d36b41e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,9 +26,6 @@ importers:
       '@heroui/system':
         specifier: ^2.2.2
         version: 2.4.20(@heroui/theme@2.4.20(tailwindcss@4.1.17))(framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@heroui/table':
-        specifier: ^2.0.36
-        version: 2.2.24(@heroui/system@2.4.20(@heroui/theme@2.4.20(tailwindcss@4.1.17))(framer-motion@11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@heroui/theme@2.4.20(tailwindcss@4.1.17))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@heroui/theme':
         specifier: ^2.2.6
         version: 2.4.20(tailwindcss@4.1.17)
@@ -6506,7 +6503,7 @@ snapshots:
       '@babel/traverse': 7.28.3
       '@babel/types': 7.28.2
       convert-source-map: 2.0.0
-      debug: 4.4.1
+      debug: 4.4.3
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -9150,7 +9147,7 @@ snapshots:
       '@noble/hashes': 1.8.0
       '@scure/base': 1.2.6
       '@types/debug': 4.1.12
-      debug: 4.4.1
+      debug: 4.4.3
       lodash.memoize: 4.1.2
       pony-cause: 2.1.11
       semver: 7.7.2
@@ -9166,7 +9163,7 @@ snapshots:
       '@noble/hashes': 1.8.0
       '@scure/base': 1.2.6
       '@types/debug': 4.1.12
-      debug: 4.4.1
+      debug: 4.4.3
       pony-cause: 2.1.11
       semver: 7.7.2
       uuid: 9.0.1
@@ -9181,7 +9178,7 @@ snapshots:
       '@noble/hashes': 1.8.0
       '@scure/base': 1.2.6
       '@types/debug': 4.1.12
-      debug: 4.4.1
+      debug: 4.4.3
       pony-cause: 2.1.11
       semver: 7.7.2
       uuid: 9.0.1
diff --git a/src/components/common/MarketInfoBlock.tsx b/src/components/common/MarketInfoBlock.tsx
index 0d76d538..481fc5c0 100644
--- a/src/components/common/MarketInfoBlock.tsx
+++ b/src/components/common/MarketInfoBlock.tsx
@@ -71,7 +71,7 @@ export function MarketInfoBlockCompact({ market, amount, className }: MarketInfo
         />
         <div className="flex flex-col">
           <div className="flex items-center gap-2">
-            <span className="font-sm min-w-[100px]">{market.collateralAsset.symbol}</span>
+            <span className="text-sm min-w-[100px]">{market.collateralAsset.symbol}</span>
             <span className="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
               {formatUnits(BigInt(market.lltv), 16)}% LTV
             </span>
diff --git a/src/components/common/MarketsTableWithSameLoanAsset.tsx b/src/components/common/MarketsTableWithSameLoanAsset.tsx
index 11094620..43c51956 100644
--- a/src/components/common/MarketsTableWithSameLoanAsset.tsx
+++ b/src/components/common/MarketsTableWithSameLoanAsset.tsx
@@ -1033,7 +1033,7 @@ export function MarketsTableWithSameLoanAsset({
       {/* Table */}
       <div className="w-full overflow-x-auto">
         <table className="responsive rounded-md font-zen text-sm">
-          <thead className="table-header">
+          <thead className="">
             <tr>
               {showSelectColumn && (
                 <th
diff --git a/src/components/ui/data-table/ExpandableRow.tsx b/src/components/ui/data-table/ExpandableRow.tsx
new file mode 100644
index 00000000..1a937eb8
--- /dev/null
+++ b/src/components/ui/data-table/ExpandableRow.tsx
@@ -0,0 +1,58 @@
+import type * as React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { TableRow, TableCell } from '../table';
+
+type ExpandableRowProps = {
+  isExpanded: boolean;
+  colSpan: number;
+  children: React.ReactNode;
+  className?: string;
+};
+
+/**
+ * ExpandableRow component for animated row expansion in tables.
+ *
+ * Usage:
+ * ```tsx
+ * <TableBody>
+ *   {items.map((item) => (
+ *     <React.Fragment key={item.id}>
+ *       <TableRow onClick={() => toggleExpanded(item.id)}>
+ *         ... main row content ...
+ *       </TableRow>
+ *       <ExpandableRow
+ *         isExpanded={expandedId === item.id}
+ *         colSpan={columnCount}
+ *       >
+ *         ... expanded content ...
+ *       </ExpandableRow>
+ *     </React.Fragment>
+ *   ))}
+ * </TableBody>
+ * ```
+ */
+export function ExpandableRow({ isExpanded, colSpan, children, className }: ExpandableRowProps) {
+  return (
+    <AnimatePresence>
+      {isExpanded && (
+        <TableRow className={className}>
+          <TableCell
+            colSpan={colSpan}
+            className="bg-[var(--palette-bg-hovered)] p-0"
+          >
+            <motion.div
+              key="content"
+              initial={{ height: 0 }}
+              animate={{ height: 'auto' }}
+              exit={{ height: 0 }}
+              transition={{ duration: 0.1 }}
+              className="overflow-hidden"
+            >
+              <div className="p-4">{children}</div>
+            </motion.div>
+          </TableCell>
+        </TableRow>
+      )}
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/ui/data-table/SortableHead.tsx b/src/components/ui/data-table/SortableHead.tsx
new file mode 100644
index 00000000..fac22395
--- /dev/null
+++ b/src/components/ui/data-table/SortableHead.tsx
@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import { ArrowDownIcon, ArrowUpIcon } from '@radix-ui/react-icons';
+import { TableHead } from '../table';
+
+type SortableHeadProps = {
+  label: string | React.ReactNode;
+  sortKey: string;
+  currentSortKey: string;
+  direction: 'asc' | 'desc';
+  onSort: (key: string) => void;
+  showDirection?: boolean;
+  className?: string;
+};
+
+export function SortableHead({ label, sortKey, currentSortKey, direction, onSort, showDirection = true, className }: SortableHeadProps) {
+  const isSorting = currentSortKey === sortKey;
+
+  return (
+    <TableHead
+      className={`cursor-pointer select-none ${isSorting ? 'text-primary' : ''} ${className ?? ''}`}
+      onClick={() => onSort(sortKey)}
+    >
+      <div className="flex items-center justify-center gap-1 whitespace-nowrap">
+        <div>{label}</div>
+        {showDirection && isSorting && (direction === 'desc' ? <ArrowDownIcon /> : <ArrowUpIcon />)}
+      </div>
+    </TableHead>
+  );
+}
diff --git a/src/components/ui/data-table/index.ts b/src/components/ui/data-table/index.ts
new file mode 100644
index 00000000..66ca92ff
--- /dev/null
+++ b/src/components/ui/data-table/index.ts
@@ -0,0 +1,2 @@
+export { SortableHead } from './SortableHead';
+export { ExpandableRow } from './ExpandableRow';
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
deleted file mode 100644
index e42a7759..00000000
--- a/src/components/ui/pagination.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { forwardRef } from 'react';
-import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { type ButtonProps, buttonVariants } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
-      {...props}
-    />
-  );
-}
-Pagination.displayName = 'Pagination';
-
-const PaginationContent = forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn('flex flex-row items-center gap-1', className)}
-    {...props}
-  />
-));
-PaginationContent.displayName = 'PaginationContent';
-
-const PaginationItem = forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn('', className)}
-    {...props}
-  />
-));
-PaginationItem.displayName = 'PaginationItem';
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<ButtonProps, 'size'> &
-  React.ComponentProps<'a'>;
-
-function PaginationLink({ className, isActive, size = 'icon', children, ...props }: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? 'page' : undefined}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? 'surface' : 'ghost',
-          size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </a>
-  );
-}
-PaginationLink.displayName = 'PaginationLink';
-
-function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn('gap-1 pl-2.5', className)}
-      {...props}
-    >
-      <ChevronLeftIcon className="h-4 w-4" />
-      <span>Previous</span>
-    </PaginationLink>
-  );
-}
-PaginationPrevious.displayName = 'PaginationPrevious';
-
-function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn('gap-1 pr-2.5', className)}
-      {...props}
-    >
-      <span>Next</span>
-      <ChevronRightIcon className="h-4 w-4" />
-    </PaginationLink>
-  );
-}
-PaginationNext.displayName = 'PaginationNext';
-
-function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      aria-hidden
-      className={cn('flex h-9 w-9 items-center justify-center', className)}
-      {...props}
-    >
-      <DotsHorizontalIcon className="h-4 w-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  );
-}
-PaginationEllipsis.displayName = 'PaginationEllipsis';
-
-export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 00000000..fa298b74
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,78 @@
+import { forwardRef } from 'react';
+import type { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
+  <table
+    ref={ref}
+    className={cn('w-full font-zen', className)}
+    {...props}
+  />
+));
+Table.displayName = 'Table';
+
+const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn(className)}
+    {...props}
+  />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn(className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn('border-t bg-[var(--color-background-secondary)] font-medium', className)}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(className)}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn('font-normal', className)}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(className)}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-gray-400', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/src/hooks/useTableSort.ts b/src/hooks/useTableSort.ts
new file mode 100644
index 00000000..ae49e0af
--- /dev/null
+++ b/src/hooks/useTableSort.ts
@@ -0,0 +1,58 @@
+import { useState, useMemo } from 'react';
+
+type SortDirection = 'asc' | 'desc';
+
+type SortFn<T> = (a: T, b: T) => number;
+
+type UseTableSortProps<T> = {
+  data: T[];
+  sortFns: Record<string, SortFn<T>>;
+  initialSortKey?: string;
+  initialDirection?: SortDirection;
+};
+
+type UseTableSortReturn<T> = {
+  sortKey: string;
+  sortDirection: SortDirection;
+  handleSort: (key: string) => void;
+  sortedData: T[];
+};
+
+export function useTableSort<T>({
+  data,
+  sortFns,
+  initialSortKey = '',
+  initialDirection = 'desc',
+}: UseTableSortProps<T>): UseTableSortReturn<T> {
+  const [sortKey, setSortKey] = useState<string>(initialSortKey);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(initialDirection);
+
+  const handleSort = (key: string) => {
+    if (sortKey === key) {
+      // Toggle direction if clicking the same column
+      setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      // New column, default to descending
+      setSortKey(key);
+      setSortDirection('desc');
+    }
+  };
+
+  const sortedData = useMemo(() => {
+    if (!sortKey || !sortFns[sortKey]) {
+      return data;
+    }
+
+    const sortFn = sortFns[sortKey];
+    const sorted = [...data].sort(sortFn);
+
+    return sortDirection === 'asc' ? sorted : sorted.reverse();
+  }, [data, sortKey, sortDirection, sortFns]);
+
+  return {
+    sortKey,
+    sortDirection,
+    handleSort,
+    sortedData,
+  };
+}