diff --git a/src/features/markets/components/market-settings-modal.tsx b/src/features/markets/components/market-settings-modal.tsx
index 70bebce1..145fe5f3 100644
--- a/src/features/markets/components/market-settings-modal.tsx
+++ b/src/features/markets/components/market-settings-modal.tsx
@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { IconSwitch } from '@/components/ui/icon-switch';
 import { Input } from '@/components/ui/input';
 import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
+import { useRateLabel } from '@/hooks/useRateLabel';
 import { useMarketPreferences } from '@/stores/useMarketPreferences';
 import { COLUMN_DESCRIPTIONS, COLUMN_LABELS, DEFAULT_COLUMN_VISIBILITY, type ColumnVisibility } from './column-visibility';
 
@@ -32,9 +33,24 @@ function SettingItem({ title, description, children }: SettingItemProps) {
 
 export default function MarketSettingsModal({ isOpen, onOpenChange }: MarketSettingsModalProps) {
   const { columnVisibility, setColumnVisibility, entriesPerPage, setEntriesPerPage } = useMarketPreferences();
+  const { short: rateShort } = useRateLabel();
 
   const [customEntries, setCustomEntries] = useState(entriesPerPage.toString());
 
+  const rateWord = rateShort === 'APR' ? 'rate' : 'yield';
+
+  const getLabel = (key: keyof ColumnVisibility): string => {
+    if (key === 'supplyAPY') return `Supply ${rateShort}`;
+    if (key === 'borrowAPY') return `Borrow ${rateShort}`;
+    return COLUMN_LABELS[key];
+  };
+
+  const getDescription = (key: keyof ColumnVisibility): string => {
+    if (key === 'supplyAPY') return `Annual percentage ${rateWord} for suppliers`;
+    if (key === 'borrowAPY') return `Annual percentage ${rateWord} for borrowers`;
+    return COLUMN_DESCRIPTIONS[key];
+  };
+
   const handleCustomEntriesSubmit = () => {
     const value = Number(customEntries);
     if (!Number.isNaN(value) && value > 0) {
@@ -74,8 +90,8 @@ export default function MarketSettingsModal({ isOpen, onOpenChange }: MarketSett
                       htmlFor={`col-${key}`}
                       className="flex-grow cursor-pointer"
                     >
-                      <p className="text-sm font-medium text-primary">{COLUMN_LABELS[key]}</p>
-                      <p className="text-xs text-secondary">{COLUMN_DESCRIPTIONS[key]}</p>
+                      <p className="text-sm font-medium text-primary">{getLabel(key)}</p>
+                      <p className="text-xs text-secondary">{getDescription(key)}</p>
                     </label>
                     <IconSwitch
                       id={`col-${key}`}
diff --git a/src/features/markets/components/table/market-table-body.tsx b/src/features/markets/components/table/market-table-body.tsx
index 97a76068..05a7480b 100644
--- a/src/features/markets/components/table/market-table-body.tsx
+++ b/src/features/markets/components/table/market-table-body.tsx
@@ -196,6 +196,7 @@ export function MarketTableBody({ currentEntries, expandedRowId, setExpandedRowI
               {columnVisibility.supplyAPY && (
                 <TableCell
                   data-label={supplyRateLabel}
+                  className="z-50 text-center"
                   style={{ minWidth: '85px', paddingLeft: 3, paddingRight: 3 }}
                 >
                   <APYCell market={item} />
diff --git a/src/features/positions/components/supplied-markets-detail.tsx b/src/features/positions/components/supplied-markets-detail.tsx
index 72c702a2..5917fb5a 100644
--- a/src/features/positions/components/supplied-markets-detail.tsx
+++ b/src/features/positions/components/supplied-markets-detail.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
@@ -8,7 +10,8 @@ import { useRateLabel } from '@/hooks/useRateLabel';
 import { useModal } from '@/hooks/useModal';
 import { formatReadable, formatBalance } from '@/utils/balance';
 import type { MarketPosition, GroupedPosition } from '@/utils/types';
-import { getCollateralColor } from '@/features/positions/utils/colors';
+import { getCollateralColorFromPalette, OTHER_COLOR } from '@/features/positions/utils/colors';
+import { useChartColors } from '@/constants/chartColors';
 import { AllocationCell } from './allocation-cell';
 type SuppliedMarketsDetailProps = {
   groupedPosition: GroupedPosition;
@@ -107,6 +110,7 @@ function MarketRow({ position, totalSupply, rateLabel }: { position: MarketPosit
 // shared similar style with @vault-allocation-detail.tsx
 export function SuppliedMarketsDetail({ groupedPosition, showCollateralExposure }: SuppliedMarketsDetailProps) {
   const { short: rateLabel } = useRateLabel();
+  const { pie: pieColors } = useChartColors();
 
   // Sort markets by size
   const sortedMarkets = [...groupedPosition.markets].sort(
@@ -138,7 +142,10 @@ export function SuppliedMarketsDetail({ groupedPosition, showCollateralExposure
                     className="h-full opacity-70"
                     style={{
                       width: `${collateral.percentage}%`,
-                      backgroundColor: collateral.symbol === 'Others' ? '#A0AEC0' : getCollateralColor(collateral.address),
+                      backgroundColor:
+                        collateral.symbol === 'Others'
+                          ? OTHER_COLOR
+                          : getCollateralColorFromPalette(collateral.address, pieColors),
                     }}
                     title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
                   />
@@ -152,7 +159,10 @@ export function SuppliedMarketsDetail({ groupedPosition, showCollateralExposure
                   >
                     <span
                       style={{
-                        color: collateral.symbol === 'Others' ? '#A0AEC0' : getCollateralColor(collateral.address),
+                        color:
+                          collateral.symbol === 'Others'
+                            ? OTHER_COLOR
+                            : getCollateralColorFromPalette(collateral.address, pieColors),
                       }}
                     >
                       ■
diff --git a/src/features/positions/utils/colors.ts b/src/features/positions/utils/colors.ts
index d88dd9e5..98540890 100644
--- a/src/features/positions/utils/colors.ts
+++ b/src/features/positions/utils/colors.ts
@@ -1,17 +1,16 @@
-// Helper function to hash a string into a number
+// Consistent color for "Other" category across pie charts
+export const OTHER_COLOR = '#64748B';
+
 function hashStringToNumber(label: string): number {
   let hash = 0;
   for (let i = 0; i < label.length; i++) {
     const char = label.charCodeAt(i);
     hash = (hash << 5) - hash + char;
-    hash &= hash; // Convert to 32bit integer
+    hash &= hash;
   }
   return Math.abs(hash);
 }
 
-// Helper function to get a color for each collateral based on its label
-export function getCollateralColor(label: string): string {
-  const hash = hashStringToNumber(label);
-  const hue = hash % 360; // Use the hash to generate a hue value between 0 and 360
-  return `hsl(${hue}, 70%, 50%)`;
+export function getCollateralColorFromPalette(label: string, pieColors: readonly string[]): string {
+  return pieColors[hashStringToNumber(label) % pieColors.length];
 }