diff --git a/src/components/ui/Select.jsx b/src/components/ui/Select.jsx
index c4742b6..90d32b4 100644
--- a/src/components/ui/Select.jsx
+++ b/src/components/ui/Select.jsx
@@ -121,7 +121,8 @@ export const Select = ({
           <div
             role="listbox"
             aria-labelledby={id}
-            className="absolute left-0 right-0 mt-2 max-h-64 overflow-auto rounded-lg border border-border-dark bg-dark-card z-50"
+            className="absolute left-0 right-0 mt-2 max-h-64 overflow-auto rounded-lg border border-[rgba(101,167,165,0.22)] bg-[#15191b] z-50"
+            style={{ boxShadow: '0 12px 30px rgba(0, 0, 0, 0.35)' }}
           >
             {items.map((opt) => {
               const isSelected = String(opt?.value) === String(value);
@@ -132,8 +133,10 @@ export const Select = ({
                   role="option"
                   aria-selected={isSelected}
                   onClick={() => selectValue(opt?.value)}
-                  className={`w-full px-4 py-2.5 text-sm text-left hover:bg-accent-dim ${
-                    isSelected ? 'bg-primary/10 text-text-primary font-semibold' : 'text-text-muted'
+                  className={`w-full px-4 py-2.5 text-sm text-left transition-colors hover:bg-[rgba(101,167,165,0.10)] hover:text-white ${
+                    isSelected
+                      ? 'bg-[rgba(101,167,165,0.10)] text-text-primary font-semibold'
+                      : 'text-white/[0.88]'
                   }`}
                 >
                   {normalizeLabel(opt?.label)}
diff --git a/src/index.css b/src/index.css
index 8b020fc..c533e0f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,10 @@
 
 @layer base {
   body {
-    background: #0d0f10;
+    background:
+      radial-gradient(circle at 20% 0%, rgba(101, 167, 165, 0.05) 0%, rgba(101, 167, 165, 0) 40%),
+      radial-gradient(circle at 80% 100%, rgba(101, 167, 165, 0.03) 0%, rgba(101, 167, 165, 0) 35%),
+      #0f1113;
     color: #e8e8e8;
     font-family:
       'Montserrat',
diff --git a/src/pages/HistoryPage.jsx b/src/pages/HistoryPage.jsx
index 3ff6d91..466b0d0 100644
--- a/src/pages/HistoryPage.jsx
+++ b/src/pages/HistoryPage.jsx
@@ -190,6 +190,24 @@ export const HistoryPage = () => {
     return base;
   };
 
+  const movementLabelMobile = (row) => {
+    const base = translateMovement(row?.movement);
+    const m = normalize(row?.movement);
+
+    if (m === 'trading_fee' && row?.tradingFeeSource === 'WITHDRAWAL') {
+      const feePct = formatFeePercentage(row?.tradingFeePercentage);
+      const line1 = `${base}${feePct ? ` (${feePct})` : ''}`;
+      const withdrawalAmount = Number(row?.tradingFeeWithdrawalAmount);
+      const line2 =
+        Number.isFinite(withdrawalAmount) && withdrawalAmount > 0
+          ? `sobre retiro ${formatCurrency(withdrawalAmount)}`
+          : null;
+      return { line1, line2 };
+    }
+
+    return { line1: movementLabel(row), line2: null };
+  };
+
   const shouldShowStatusPill = (movement) => {
     const m = normalize(movement);
     return (
@@ -400,68 +418,76 @@ export const HistoryPage = () => {
         <>
           {/* Mobile cards */}
           <div data-testid="history-mobile" className="md:hidden space-y-3">
-            {mobileVisibleRows.map((row, idx) => (
-              <div key={`${row.code}-${row.date}-${idx}`} className="winbit-card--compact">
-                <div className="flex items-start justify-between gap-3 mb-1">
-                  <div className="min-w-0">
-                    <div className="flex items-center gap-2 min-w-0">
-                      <div className="text-sm font-semibold text-text-primary truncate">
-                        {movementLabel(row)}
+            {mobileVisibleRows.map((row, idx) => {
+              const mobileLabel = movementLabelMobile(row);
+              return (
+                <div key={`${row.code}-${row.date}-${idx}`} className="winbit-card--compact">
+                  <div className="flex items-start justify-between gap-3 mb-1">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2 min-w-0 flex-wrap">
+                        <div className="text-sm font-semibold text-text-primary leading-snug">
+                          {mobileLabel.line1}
+                          {mobileLabel.line2 && (
+                            <span className="block text-xs font-normal text-text-muted mt-0.5">
+                              {mobileLabel.line2}
+                            </span>
+                          )}
+                        </div>
+                        {movementCompletedIcon(row)}
+                        {shouldShowStatusPill(row?.movement) && row?.status ? (
+                          <span
+                            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold whitespace-nowrap ${statusPillClass(
+                              row.status,
+                            )}`}
+                          >
+                            {translateStatus(row.status, row?.movement)}
+                          </span>
+                        ) : null}
                       </div>
-                      {movementCompletedIcon(row)}
-                      {shouldShowStatusPill(row?.movement) && row?.status ? (
-                        <span
-                          className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold whitespace-nowrap ${statusPillClass(
-                            row.status,
-                          )}`}
-                        >
-                          {translateStatus(row.status, row?.movement)}
-                        </span>
-                      ) : null}
+                      <div className="text-xs text-text-muted mt-1">{formatDate(row.date)}</div>
                     </div>
-                    <div className="text-xs text-text-muted mt-1">{formatDate(row.date)}</div>
-                  </div>
 
-                  <div className="shrink-0 text-right">
-                    <div
-                      className={`text-base font-bold ${
-                        displayAmount(row) > 0
-                          ? 'text-success'
-                          : displayAmount(row) < 0
-                            ? 'text-error'
-                            : 'text-text-primary'
-                      }`}
-                    >
-                      {displayAmount(row) > 0 ? '+' : ''}
-                      {formatCurrency(displayAmount(row))}
+                    <div className="shrink-0 text-right">
+                      <div
+                        className={`text-base font-bold ${
+                          displayAmount(row) > 0
+                            ? 'text-success'
+                            : displayAmount(row) < 0
+                              ? 'text-error'
+                              : 'text-text-primary'
+                        }`}
+                      >
+                        {displayAmount(row) > 0 ? '+' : ''}
+                        {formatCurrency(displayAmount(row))}
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <div className="mt-2 text-[13px] text-text-muted flex items-center gap-2">
-                  <span>Balance:</span>
-                  <span className="font-medium text-text-primary">
-                    {row.previousBalance !== null ? formatCurrency(row.previousBalance) : '-'}
-                  </span>
-                  <svg
-                    className="w-3 h-3 text-text-dim"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M14 5l7 7m0 0l-7 7m7-7H3"
-                    />
-                  </svg>
-                  <span className="font-medium text-text-primary">
-                    {row.newBalance !== null ? formatCurrency(row.newBalance) : '-'}
-                  </span>
+                  <div className="mt-2 text-[13px] text-text-muted flex items-center gap-2">
+                    <span>Balance:</span>
+                    <span className="font-medium text-text-primary">
+                      {row.previousBalance !== null ? formatCurrency(row.previousBalance) : '-'}
+                    </span>
+                    <svg
+                      className="w-3 h-3 text-text-dim"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M14 5l7 7m0 0l-7 7m7-7H3"
+                      />
+                    </svg>
+                    <span className="font-medium text-text-primary">
+                      {row.newBalance !== null ? formatCurrency(row.newBalance) : '-'}
+                    </span>
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
 
           {shouldPaginateMobile ? (