diff --git a/src/components/features/dashboard/KpiCard.jsx b/src/components/features/dashboard/KpiCard.jsx
index c05eda7..967d2e2 100644
--- a/src/components/features/dashboard/KpiCard.jsx
+++ b/src/components/features/dashboard/KpiCard.jsx
@@ -17,32 +17,20 @@ export const KpiCard = ({
         ? formatPercentage(value)
         : String(value ?? '');
 
-  const resolvedTone = highlighted ? 'highlight' : tone;
+  const cardVariant = highlighted ? 'highlight' : 'default';
 
-  const cardClassName =
-    resolvedTone === 'highlight'
-      ? 'bg-gradient-to-r from-primary to-[#4a9d8e] text-white'
-      : resolvedTone === 'neutral'
-        ? 'bg-[rgba(101,167,165,0.06)] border border-border-accent'
-        : 'bg-dark-card';
+  const titleClassName = highlighted ? 'text-sm text-[#8dc8bf]' : 'text-sm text-text-muted';
 
-  const titleClassName =
-    resolvedTone === 'highlight'
-      ? 'text-sm text-white/90'
-      : resolvedTone === 'neutral'
-        ? 'text-sm text-text-muted'
-        : 'text-sm text-text-muted';
-
-  const valueClassName =
-    resolvedTone === 'highlight'
-      ? 'text-3xl font-bold text-white'
-      : resolvedTone === 'neutral'
-        ? 'text-2xl font-semibold text-text-primary'
-        : 'text-2xl font-semibold text-text-primary';
+  const valueClassName = highlighted
+    ? 'text-3xl font-bold text-text-primary'
+    : tone === 'neutral'
+      ? 'text-2xl font-semibold text-text-primary'
+      : 'text-2xl font-semibold text-text-primary';
 
   return (
     <Card
-      className={`${cardClassName} transition-transform duration-200 ease-out hover:-translate-y-0.5`}
+      variant={cardVariant}
+      className="transition-transform duration-200 ease-out hover:-translate-y-0.5"
     >
       <div className="space-y-2">
         <p className={titleClassName}>{title}</p>
diff --git a/src/components/features/deposits/DepositOptionCard.jsx b/src/components/features/deposits/DepositOptionCard.jsx
index c292478..4dac9b5 100644
--- a/src/components/features/deposits/DepositOptionCard.jsx
+++ b/src/components/features/deposits/DepositOptionCard.jsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { Card } from '../../ui/Card';
-import { Button } from '../../ui/Button';
 import { useTranslation } from 'react-i18next';
 
 const COPYABLE_KEYS = [
@@ -31,11 +30,11 @@ export const DepositOptionCard = ({ option }) => {
   const detailEntries = Object.entries(details).filter(([, v]) => v);
 
   return (
-    <Card className="transition-colors hover:border-border-accent">
+    <Card variant="compact" className="transition-colors hover:border-[rgba(101,167,165,0.35)]">
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <h4 className="font-semibold text-text-primary">{option.label}</h4>
-          <span className="text-xs font-medium text-text-muted bg-dark-section rounded-full px-2 py-0.5">
+          <span className="text-xs font-medium text-text-muted bg-[rgba(20,20,20,0.55)] rounded-full px-2 py-0.5">
             {option.currency}
           </span>
         </div>
@@ -48,13 +47,13 @@ export const DepositOptionCard = ({ option }) => {
                 <p className="text-sm text-text-primary font-mono break-all">{value}</p>
               </div>
               {COPYABLE_KEYS.includes(key) && (
-                <Button
+                <button
+                  type="button"
                   onClick={() => handleCopy(value, key)}
-                  variant="outline"
-                  className="shrink-0 text-xs py-1 px-3"
+                  className="btn-copy shrink-0 text-xs py-1.5 px-3"
                 >
                   {copiedKey === key ? t('deposits.copied') : t('deposits.copy')}
-                </Button>
+                </button>
               )}
             </div>
           ))}
diff --git a/src/components/features/requests/DepositForm.jsx b/src/components/features/requests/DepositForm.jsx
index 6dfea42..9b2ade2 100644
--- a/src/components/features/requests/DepositForm.jsx
+++ b/src/components/features/requests/DepositForm.jsx
@@ -212,7 +212,7 @@ export const DepositForm = ({ userEmail, depositOptions = [] }) => {
               ref={fileInputRef}
               accept="image/jpeg,image/png,image/webp,application/pdf"
               onChange={handleFileChange}
-              className="block w-full text-sm text-text-muted file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 cursor-pointer"
+              className="block w-full text-sm text-text-muted file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[rgba(101,167,165,0.10)] file:text-[#8dc8bf] hover:file:bg-[rgba(101,167,165,0.18)] cursor-pointer"
             />
             {attachment && (
               <p className="mt-1 text-xs text-success">
@@ -221,7 +221,7 @@ export const DepositForm = ({ userEmail, depositOptions = [] }) => {
             )}
           </div>
 
-          <div className="bg-accent/30 p-4 rounded-lg text-sm text-text-primary">
+          <div className="info-box text-sm text-text-primary">
             <p className="font-medium mb-1">{t('deposits.processingHoursTitle')}</p>
             <p>• {t('deposits.processingHoursLine1')}</p>
             <p>• {t('deposits.processingHoursLine2')}</p>
@@ -232,10 +232,10 @@ export const DepositForm = ({ userEmail, depositOptions = [] }) => {
               role="alert"
               className={`rounded-lg p-4 ${
                 message.type === 'error'
-                  ? 'bg-[rgba(239,83,80,0.15)] text-error'
+                  ? 'badge-rejected'
                   : message.type === 'success'
-                    ? 'bg-[rgba(76,175,80,0.15)] text-success'
-                    : 'bg-[rgba(101,167,165,0.15)] text-info'
+                    ? 'badge-completed'
+                    : 'info-box'
               }`}
             >
               <p className="text-sm">{message.text}</p>
diff --git a/src/components/features/requests/WithdrawalForm.jsx b/src/components/features/requests/WithdrawalForm.jsx
index b4c67ed..f3aab28 100644
--- a/src/components/features/requests/WithdrawalForm.jsx
+++ b/src/components/features/requests/WithdrawalForm.jsx
@@ -105,7 +105,7 @@ export const WithdrawalForm = ({ userEmail, currentBalance }) => {
               <span className="font-semibold">{formatCurrency(confirmModal.withdrawalAmount)}</span>
             </div>
             {confirmModal.hasFee ? (
-              <div className="flex justify-between text-blue-700">
+              <div className="flex justify-between text-primary">
                 <span>Comisión de trading ({confirmModal.feePercentage}%)</span>
                 <span className="font-semibold">{formatCurrency(confirmModal.feeAmount)}</span>
               </div>
@@ -115,7 +115,7 @@ export const WithdrawalForm = ({ userEmail, currentBalance }) => {
               </p>
             )}
             {confirmModal.hasFee && (
-              <div className="border-t border-border-dark pt-3 flex justify-between font-semibold text-text-primary">
+              <div className="border-t border-[rgba(255,255,255,0.08)] pt-3 flex justify-between font-semibold text-text-primary">
                 <span>Total debitado del portfolio</span>
                 <span>
                   {formatCurrency(confirmModal.withdrawalAmount + confirmModal.feeAmount)}
@@ -193,7 +193,7 @@ export const WithdrawalForm = ({ userEmail, currentBalance }) => {
             />
           )}
 
-          <div className="bg-accent/30 p-4 rounded-lg text-sm text-text-primary">
+          <div className="info-box text-sm text-text-primary">
             <p className="font-medium mb-1">{t('withdrawals.processingHoursTitle')}</p>
             <p>• {t('withdrawals.processingHoursLine1')}</p>
             <p>• {t('withdrawals.processingHoursLine2')}</p>
@@ -204,9 +204,7 @@ export const WithdrawalForm = ({ userEmail, currentBalance }) => {
             <div
               role="alert"
               className={`p-4 rounded-lg ${
-                message.type === 'success'
-                  ? 'bg-[rgba(76,175,80,0.15)] text-success'
-                  : 'bg-[rgba(239,83,80,0.15)] text-error'
+                message.type === 'success' ? 'badge-completed' : 'badge-rejected'
               }`}
             >
               {message.text}
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
index f8e419b..4638f1d 100644
--- a/src/components/ui/Button.jsx
+++ b/src/components/ui/Button.jsx
@@ -10,12 +10,15 @@ export const Button = ({
     'px-6 py-3 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg disabled:opacity-50 disabled:cursor-not-allowed';
 
   const variants = {
-    primary: 'bg-primary text-white hover:bg-primary/80 focus:ring-primary',
+    primary:
+      'bg-[rgba(101,167,165,0.15)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.25)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
     secondary:
-      'bg-accent-dim text-white border border-[rgba(101,167,165,0.45)] hover:bg-accent-glow hover:border-primary focus:ring-primary',
-    danger: 'bg-error text-white hover:bg-error/80 focus:ring-error',
+      'bg-[rgba(101,167,165,0.10)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.18)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
+    danger:
+      'bg-[rgba(196,107,107,0.14)] text-[#c46b6b] border border-[rgba(196,107,107,0.18)] hover:bg-[rgba(196,107,107,0.22)] focus:ring-error',
     outline:
-      'border border-[rgba(101,167,165,0.45)] text-primary bg-accent-dim hover:bg-accent-glow hover:border-primary focus:ring-primary',
+      'bg-[rgba(101,167,165,0.10)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.18)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
+    copy: 'btn-copy text-xs focus:ring-primary',
   };
 
   return (
diff --git a/src/components/ui/Button.test.jsx b/src/components/ui/Button.test.jsx
index f73e303..2bb63b7 100644
--- a/src/components/ui/Button.test.jsx
+++ b/src/components/ui/Button.test.jsx
@@ -18,25 +18,25 @@ describe('Button', () => {
   it('applies primary variant styles by default', () => {
     render(<Button>Primary</Button>);
     const button = screen.getByText('Primary');
-    expect(button).toHaveClass('bg-primary');
+    expect(button).toHaveClass('focus:ring-primary');
   });
 
   it('applies secondary variant styles', () => {
     render(<Button variant="secondary">Secondary</Button>);
     const button = screen.getByText('Secondary');
-    expect(button).toHaveClass('bg-accent-dim');
+    expect(button).toHaveClass('focus:ring-primary');
   });
 
   it('applies danger variant styles', () => {
     render(<Button variant="danger">Danger</Button>);
     const button = screen.getByText('Danger');
-    expect(button).toHaveClass('bg-error');
+    expect(button).toHaveClass('focus:ring-error');
   });
 
   it('applies outline variant styles', () => {
     render(<Button variant="outline">Outline</Button>);
     const button = screen.getByText('Outline');
-    expect(button).toHaveClass('bg-accent-dim');
+    expect(button).toHaveClass('focus:ring-primary');
   });
 
   it('disables button when disabled prop is true', () => {
diff --git a/src/components/ui/Card.jsx b/src/components/ui/Card.jsx
index 90f196c..444139c 100644
--- a/src/components/ui/Card.jsx
+++ b/src/components/ui/Card.jsx
@@ -1,8 +1,13 @@
-export const Card = ({ children, className = '', title }) => {
+export const Card = ({ children, className = '', title, variant = 'default' }) => {
+  const variantClass =
+    variant === 'highlight'
+      ? 'winbit-card--highlight'
+      : variant === 'compact'
+        ? 'winbit-card--compact'
+        : 'winbit-card';
+
   return (
-    <div
-      className={`bg-dark-card rounded-lg border border-border-dark p-6 backdrop-blur-sm ${className}`}
-    >
+    <div className={`${variantClass} ${className}`}>
       {title && <h3 className="text-xl font-semibold mb-4 text-text-primary">{title}</h3>}
       {children}
     </div>
diff --git a/src/components/ui/Card.test.jsx b/src/components/ui/Card.test.jsx
index ee92c64..a8db7be 100644
--- a/src/components/ui/Card.test.jsx
+++ b/src/components/ui/Card.test.jsx
@@ -27,6 +27,6 @@ describe('Card', () => {
   it('has default card styles', () => {
     const { container } = render(<Card>Content</Card>);
     const card = container.firstChild;
-    expect(card).toHaveClass('bg-dark-card', 'rounded-lg', 'border-border-dark');
+    expect(card).toHaveClass('winbit-card');
   });
 });
diff --git a/src/index.css b/src/index.css
index 76bdca2..8b020fc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,7 @@
 
 @layer base {
   body {
-    background: #0a0a0a;
+    background: #0d0f10;
     color: #e8e8e8;
     font-family:
       'Montserrat',
@@ -18,7 +18,7 @@
   input,
   select,
   textarea {
-    background: rgba(20, 20, 20, 0.5);
+    background: rgba(15, 18, 18, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
@@ -51,4 +51,111 @@
   .container {
     @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
   }
+
+  .winbit-card {
+    background: linear-gradient(180deg, rgba(18, 24, 24, 0.92) 0%, rgba(15, 18, 18, 0.96) 100%);
+    border: 1px solid rgba(101, 167, 165, 0.22);
+    border-radius: 8px;
+    padding: 28px 26px;
+    box-shadow:
+      inset 3px 0 0 rgba(101, 167, 165, 0.22),
+      0 10px 28px rgba(0, 0, 0, 0.22);
+  }
+
+  .winbit-card--highlight {
+    background: linear-gradient(180deg, rgba(28, 40, 40, 0.94) 0%, rgba(20, 28, 28, 0.98) 100%);
+    border: 1px solid rgba(101, 167, 165, 0.32);
+    border-radius: 8px;
+    padding: 28px 26px;
+    box-shadow:
+      inset 4px 0 0 rgba(101, 167, 165, 0.3),
+      0 12px 30px rgba(0, 0, 0, 0.24);
+  }
+
+  .winbit-card--compact {
+    background: linear-gradient(180deg, rgba(18, 24, 24, 0.92) 0%, rgba(15, 18, 18, 0.96) 100%);
+    border: 1px solid rgba(101, 167, 165, 0.22);
+    border-radius: 8px;
+    padding: 20px 22px;
+    box-shadow:
+      inset 3px 0 0 rgba(101, 167, 165, 0.22),
+      0 10px 28px rgba(0, 0, 0, 0.22);
+  }
+
+  .section-subtitle {
+    color: #65a7a5;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(101, 167, 165, 0.35);
+    font-size: 0.95rem;
+    margin-top: 4px;
+  }
+
+  .badge-completed {
+    background: rgba(101, 167, 165, 0.14);
+    color: #8dc8bf;
+    border: 1px solid rgba(101, 167, 165, 0.2);
+  }
+
+  .badge-pending {
+    background: rgba(194, 170, 114, 0.14);
+    color: #c2aa72;
+    border: 1px solid rgba(194, 170, 114, 0.18);
+  }
+
+  .badge-rejected {
+    background: rgba(196, 107, 107, 0.14);
+    color: #c46b6b;
+    border: 1px solid rgba(196, 107, 107, 0.18);
+  }
+
+  .badge-cancelled {
+    background: rgba(20, 20, 20, 0.55);
+    color: #888888;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .info-box {
+    background: rgba(101, 167, 165, 0.1);
+    border: 1px solid rgba(101, 167, 165, 0.22);
+    border-radius: 8px;
+    padding: 20px;
+  }
+
+  .row-positive {
+    background: rgba(101, 167, 165, 0.1);
+  }
+
+  .row-positive:hover {
+    background: rgba(101, 167, 165, 0.16);
+  }
+
+  .row-negative {
+    background: rgba(196, 107, 107, 0.1);
+  }
+
+  .row-negative:hover {
+    background: rgba(196, 107, 107, 0.16);
+  }
+
+  .row-fee {
+    background: rgba(101, 167, 165, 0.1);
+  }
+
+  .row-fee:hover {
+    background: rgba(101, 167, 165, 0.16);
+  }
+
+  .btn-copy {
+    background: rgba(101, 167, 165, 0.1);
+    border: 1px solid rgba(101, 167, 165, 0.35);
+    color: #8dc8bf;
+    border-radius: 6px;
+    padding: 8px 16px;
+    transition: all 0.2s ease;
+  }
+
+  .btn-copy:hover {
+    background: rgba(101, 167, 165, 0.18);
+    border-color: rgba(101, 167, 165, 0.55);
+  }
 }
diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx
index 368be21..5d1ce0c 100644
--- a/src/pages/DashboardPage.jsx
+++ b/src/pages/DashboardPage.jsx
@@ -76,14 +76,44 @@ const getLastUpdateDate = () => {
   return `${yDay} ${MONTHS_SHORT[yMonth]} ${yYear} - 18:00 (UTC-3)`;
 };
 
-const formatChartAxisDate = (isoDate) => {
+const getLastUpdateIsoLabel = () => {
+  const now = new Date();
+  const arFormatter = new Intl.DateTimeFormat('en-US', {
+    timeZone: AR_TZ,
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false,
+  });
+  const parts = {};
+  for (const { type, value } of arFormatter.formatToParts(now)) {
+    parts[type] = value;
+  }
+
+  const currentHour = parseInt(parts.hour, 10);
+  const day = parseInt(parts.day, 10);
+  const month = parseInt(parts.month, 10);
+  const year = parseInt(parts.year, 10);
+
+  if (currentHour >= 18) {
+    return `${day} ${MONTHS_SHORT[month - 1]}`;
+  }
+
+  const yesterday = new Date(Date.UTC(year, month - 1, day - 1));
+  return `${yesterday.getUTCDate()} ${MONTHS_SHORT[yesterday.getUTCMonth()]}`;
+};
+
+const formatChartAxisDate = (isoDate, overrideLabel) => {
+  if (overrideLabel) return overrideLabel;
   if (!isoDate) return '';
   const d = new Date(`${isoDate}T12:00:00.000Z`);
   if (isNaN(d.getTime())) return '';
   return `${d.getUTCDate()} ${MONTHS_SHORT[d.getUTCMonth()]}`;
 };
 
-const PortfolioLineChart = ({ series, title }) => {
+const PortfolioLineChart = ({ series, title, endAxisLabel }) => {
   const [hoveredPoint, setHoveredPoint] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
   const width = 900;
@@ -208,7 +238,7 @@ const PortfolioLineChart = ({ series, title }) => {
       >
         <defs>
           <linearGradient id="portfolioArea" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor="#65a7a5" stopOpacity="0.28" />
+            <stop offset="0%" stopColor="#65a7a5" stopOpacity="0.18" />
             <stop offset="100%" stopColor="#65a7a5" stopOpacity="0.02" />
           </linearGradient>
         </defs>
@@ -291,11 +321,13 @@ const PortfolioLineChart = ({ series, title }) => {
 
       {hoveredPoint && (
         <div
-          className="fixed bg-[#181818] text-text-primary text-xs rounded-lg px-3 py-2 pointer-events-none z-50"
+          className="fixed text-text-primary text-xs rounded-lg px-3 py-2 pointer-events-none z-50"
           style={{
             left: `${tooltipPosition.x}px`,
             top: `${tooltipPosition.y}px`,
             transform: 'translate(-50%, -100%)',
+            background: 'rgba(18, 24, 24, 0.95)',
+            border: '1px solid rgba(101, 167, 165, 0.22)',
             boxShadow: '0 4px 12px rgba(0,0,0,0.7)',
           }}
         >
@@ -306,11 +338,7 @@ const PortfolioLineChart = ({ series, title }) => {
 
       <div className="mt-2 flex items-center justify-between text-xs text-text-muted">
         <span>{series[0]?.date ? formatChartAxisDate(series[0].date) : ''}</span>
-        <span>
-          {series[series.length - 1]?.date
-            ? formatChartAxisDate(series[series.length - 1].date)
-            : ''}
-        </span>
+        <span>{endAxisLabel || formatChartAxisDate(series[series.length - 1]?.date)}</span>
       </div>
     </div>
   );
@@ -387,6 +415,7 @@ export const DashboardPage = () => {
   }, [fullSeries, rangeKey]);
 
   const lastUpdate = useMemo(() => getLastUpdateDate(), []);
+  const endAxisLabel = useMemo(() => getLastUpdateIsoLabel(), []);
 
   if (loading) {
     return (
@@ -418,23 +447,23 @@ export const DashboardPage = () => {
         <h1 className="text-3xl font-bold text-text-primary">
           {t('dashboard.welcomeBack', { name: formatName(data.name) })}
         </h1>
-        <p className="text-text-muted mt-1">{t('dashboard.subtitle')}</p>
+        <p className="section-subtitle mt-1">{t('dashboard.subtitle')}</p>
       </div>
 
-      {/* Row 1: Capital invertido + Valor del portafolio */}
+      {/* Row 1: Valor del portfolio + Capital invertido */}
       <div className="grid gap-4 md:grid-cols-2 mb-6">
-        <KpiCard
-          title={t('dashboard.kpis.totalInvested')}
-          value={data.totalInvested ?? 0}
-          variant="currency"
-          tone="neutral"
-        />
         <KpiCard
           title={t('dashboard.kpis.currentValue')}
           value={data.balance}
           variant="currency"
           highlighted={true}
         />
+        <KpiCard
+          title={t('dashboard.kpis.totalInvested')}
+          value={data.totalInvested ?? 0}
+          variant="currency"
+          tone="neutral"
+        />
       </div>
 
       {/* Row 2: Resultado histórico (%) + Resultado histórico (USD) */}
@@ -452,7 +481,7 @@ export const DashboardPage = () => {
         />
       </div>
 
-      {/* Row 3: Resultado 2026 (%) + Resultado 2026 (USD) */}
+      {/* Row 3: Resultado estrategia actual (%) + Resultado estrategia actual (USD) */}
       <div className="grid gap-4 md:grid-cols-2 mb-4">
         <KpiCard
           title={t('dashboard.kpis.strategyReturnYtdPct')}
@@ -467,10 +496,7 @@ export const DashboardPage = () => {
         />
       </div>
 
-      <div
-        className="rounded-lg bg-dark-card border border-border-dark p-6"
-        data-testid="portfolio-evolution"
-      >
+      <div className="winbit-card" data-testid="portfolio-evolution">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
           <div>
             <h2 className="text-lg font-semibold text-text-primary">
@@ -493,8 +519,8 @@ export const DashboardPage = () => {
                 onClick={() => setRangeKey(opt.key)}
                 className={`rounded-full border px-3 py-1 text-sm font-medium transition-colors ${
                   isActive
-                    ? 'bg-primary text-white border-primary'
-                    : 'bg-dark-section text-text-muted border-border-dark hover:border-primary hover:text-primary'
+                    ? 'bg-[rgba(101,167,165,0.18)] text-[#8dc8bf] border-[rgba(101,167,165,0.35)]'
+                    : 'bg-transparent text-text-muted border-[rgba(255,255,255,0.08)] hover:border-[rgba(101,167,165,0.35)] hover:text-primary'
                 }`}
               >
                 {opt.label}
@@ -507,9 +533,13 @@ export const DashboardPage = () => {
           {historyLoading ? (
             <div className="text-sm text-text-muted">{t('dashboard.chart.loading')}</div>
           ) : series.length >= 2 ? (
-            <PortfolioLineChart series={series} title={t('dashboard.chart.title')} />
+            <PortfolioLineChart
+              series={series}
+              title={t('dashboard.chart.title')}
+              endAxisLabel={endAxisLabel}
+            />
           ) : (
-            <div className="rounded-md border border-dashed border-border-dark p-6 text-sm text-text-muted">
+            <div className="rounded-md border border-dashed border-[rgba(101,167,165,0.22)] p-6 text-sm text-text-muted">
               {t('dashboard.chart.noData')}
             </div>
           )}
diff --git a/src/pages/HistoryPage.jsx b/src/pages/HistoryPage.jsx
index 2668168..3ff6d91 100644
--- a/src/pages/HistoryPage.jsx
+++ b/src/pages/HistoryPage.jsx
@@ -58,13 +58,12 @@ const formatMonthYearSpace = (dateStr) => {
   return mm && yyyy ? `${mm} ${yyyy}` : '';
 };
 
-/** Formats YYYY-MM as "Ene 2026" (es) or "Jan 2026" (en). Returns label as-is if not YYYY-MM. */
 const formatPeriodLabel = (label, t) => {
   if (!label || typeof label !== 'string') return label ?? '';
   const m = label.match(/^(\d{4})-(\d{2})$/);
   if (!m) return label;
   const year = parseInt(m[1], 10);
-  const monthIndex = parseInt(m[2], 10) - 1; // 0..11
+  const monthIndex = parseInt(m[2], 10) - 1;
   const monthKey = `history.monthsShort.${monthIndex}`;
   const monthAbbrev = t(monthKey);
   return monthAbbrev && !monthAbbrev.includes('.') ? `${monthAbbrev} ${year}` : label;
@@ -89,10 +88,8 @@ export const HistoryPage = () => {
   const translateMovement = (movement) => {
     const raw = String(movement ?? '').trim();
     const rawUpper = raw.toUpperCase();
-    // Strip any weird/invisible characters (e.g. NBSP, zero-width) and keep only A-Z and underscores.
     const canonicalUpper = rawUpper.replace(/[^A-Z_]/g, '');
 
-    // Hard guard: always translate this movement (including common typo with one "m").
     if (canonicalUpper === 'REFERRAL_COMMISSION' || canonicalUpper === 'REFERRAL_COMISSION') {
       return t('history.movement.referral_commission', 'Comisión por referido');
     }
@@ -119,14 +116,10 @@ export const HistoryPage = () => {
     if (m === 'deposit_reversal' || m === 'deposit_reversa' || m === 'depósito_revertido') {
       return t('history.movement.deposit_reversal', 'Depósito revertido');
     }
-    // Accept multiple formats:
-    // - REFERRAL_COMMISSION (backend enum)
-    // - referral_commission
-    // - referral commission / referral-commission
     const refKey = m.replace(/[\s-]+/g, '_');
     const looksLikeReferral =
       canonicalUpper === 'REFERRAL_COMMISSION' ||
-      canonicalUpper === 'REFERRAL_COMISSION' || // common typo (one "m")
+      canonicalUpper === 'REFERRAL_COMISSION' ||
       rawUpper === 'REFERRAL COMMISSION' ||
       (rawUpper.includes('REFERRAL') && rawUpper.includes('COMMISSION'));
 
@@ -236,12 +229,12 @@ export const HistoryPage = () => {
   const statusPillClass = (status) => {
     const s = normalize(status);
     if (s === 'rechazado' || s === 'rejected') {
-      return 'bg-[rgba(239,83,80,0.15)] text-error';
+      return 'badge-rejected';
     }
     if (s === 'pendiente' || s === 'pending') {
-      return 'bg-[rgba(255,152,0,0.15)] text-warning';
+      return 'badge-pending';
     }
-    return 'bg-primary text-white';
+    return 'badge-completed';
   };
 
   const movementKind = (movement) => {
@@ -251,7 +244,6 @@ export const HistoryPage = () => {
     return null;
   };
 
-  // DEPOSIT_REVERSAL stores positive amount; display as negative (outflow)
   const displayAmount = (row) => {
     const m = normalize(row?.movement);
     if (m === 'deposit_reversal') return -Math.abs(Number(row?.amount) || 0);
@@ -308,18 +300,18 @@ export const HistoryPage = () => {
     const m = normalize(row?.movement);
 
     if (m === 'trading_fee' || m === 'trading_fee_adjustment') {
-      return 'bg-[rgba(101,167,165,0.15)] hover:bg-[rgba(101,167,165,0.25)]';
+      return 'row-fee';
     }
 
     if (m === 'operating_result') {
       const pct = Number(row?.operatingResultPercent);
       const sign = Number.isFinite(pct) ? pct : Number(row?.amount);
-      if (sign > 0) return 'bg-[rgba(76,175,80,0.15)] hover:bg-[rgba(76,175,80,0.25)]';
-      if (sign < 0) return 'bg-[rgba(239,83,80,0.15)] hover:bg-[rgba(239,83,80,0.25)]';
-      return 'bg-dark-section hover:bg-accent-dim';
+      if (sign > 0) return 'row-positive';
+      if (sign < 0) return 'row-negative';
+      return 'hover:bg-[rgba(101,167,165,0.08)]';
     }
 
-    return 'hover:bg-accent-dim';
+    return 'hover:bg-[rgba(101,167,165,0.08)]';
   };
 
   const translatedError = (() => {
@@ -395,7 +387,7 @@ export const HistoryPage = () => {
     <div className="space-y-6">
       <div>
         <h1 className="text-3xl font-bold text-text-primary">{t('history.title')}</h1>
-        <p className="text-text-muted mt-1">{t('history.subtitle')}</p>
+        <p className="section-subtitle mt-1">{t('history.subtitle')}</p>
       </div>
 
       {rows.length === 0 ? (
@@ -409,10 +401,7 @@ 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="bg-dark-card rounded-lg border border-border-dark p-4"
-              >
+              <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">
@@ -487,7 +476,7 @@ export const HistoryPage = () => {
               <div className="flex items-center gap-2">
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                   onClick={() => setMobilePage((p) => Math.max(1, p - 1))}
                   disabled={mobilePage <= 1}
                 >
@@ -495,7 +484,7 @@ export const HistoryPage = () => {
                 </button>
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                   onClick={() => setMobilePage((p) => Math.min(mobileTotalPages, p + 1))}
                   disabled={mobilePage >= mobileTotalPages}
                 >
@@ -508,11 +497,11 @@ export const HistoryPage = () => {
           {/* Desktop table */}
           <div
             data-testid="history-desktop"
-            className="hidden md:block overflow-hidden bg-dark-card rounded-lg border border-border-dark"
+            className="hidden md:block overflow-hidden winbit-card !p-0"
           >
             <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-border-dark">
-                <thead className="bg-dark-section">
+              <table className="min-w-full divide-y divide-[rgba(255,255,255,0.08)]">
+                <thead className="bg-[rgba(20,20,20,0.55)]">
                   <tr>
                     <th
                       scope="col"
@@ -546,7 +535,7 @@ export const HistoryPage = () => {
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-dark-card divide-y divide-border-dark">
+                <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
                   {desktopVisibleRows.map((row, idx) => (
                     <tr key={`${row.code}-${row.date}-${idx}`} className={desktopRowClass(row)}>
                       <td className="px-4 py-3 text-sm text-text-primary whitespace-nowrap">
@@ -596,7 +585,7 @@ export const HistoryPage = () => {
               <label className="flex items-center gap-2 text-xs text-text-muted">
                 {t('common.rowsPerPage', 'Filas por página')}
                 <select
-                  className="rounded-lg border border-border-dark bg-dark-card px-2 py-1 text-xs text-text-primary"
+                  className="rounded-lg border border-[rgba(255,255,255,0.08)] bg-[rgba(15,18,18,0.8)] px-2 py-1 text-xs text-text-primary"
                   value={desktopPageSize}
                   onChange={(e) => setDesktopPageSize(Number(e.target.value))}
                 >
@@ -613,7 +602,7 @@ export const HistoryPage = () => {
               <div className="flex items-center gap-2">
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                   onClick={() => setDesktopPage((p) => Math.max(1, p - 1))}
                   disabled={desktopPage <= 1}
                 >
@@ -621,7 +610,7 @@ export const HistoryPage = () => {
                 </button>
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                   onClick={() => setDesktopPage((p) => Math.min(desktopTotalPages, p + 1))}
                   disabled={desktopPage >= desktopTotalPages}
                 >
diff --git a/src/pages/OperatingPage.jsx b/src/pages/OperatingPage.jsx
index 54e758b..cd8208d 100644
--- a/src/pages/OperatingPage.jsx
+++ b/src/pages/OperatingPage.jsx
@@ -30,11 +30,16 @@ const movementText = (row, t) => {
 
 const rowBgClass = (row) => {
   const amt = Number(row?.amount);
-  if (Number.isFinite(amt) && amt > 0)
-    return 'bg-[rgba(76,175,80,0.15)] hover:bg-[rgba(76,175,80,0.25)]';
-  if (Number.isFinite(amt) && amt < 0)
-    return 'bg-[rgba(239,83,80,0.15)] hover:bg-[rgba(239,83,80,0.25)]';
-  return 'hover:bg-accent-dim';
+  if (Number.isFinite(amt) && amt > 0) return 'row-positive';
+  if (Number.isFinite(amt) && amt < 0) return 'row-negative';
+  return 'hover:bg-[rgba(101,167,165,0.08)]';
+};
+
+const mobileAmountColor = (row) => {
+  const amt = Number(row?.amount);
+  if (Number.isFinite(amt) && amt > 0) return 'text-success';
+  if (Number.isFinite(amt) && amt < 0) return 'text-error';
+  return 'text-text-primary';
 };
 
 export const OperatingPage = () => {
@@ -78,7 +83,6 @@ export const OperatingPage = () => {
   }, [rows.length, desktopPageSize]);
 
   useEffect(() => {
-    // Keep pages in bounds when data changes
     setMobilePage((p) => Math.min(Math.max(1, p), mobileTotalPages));
   }, [mobileTotalPages]);
 
@@ -115,7 +119,7 @@ export const OperatingPage = () => {
     <div className="space-y-6">
       <div>
         <h1 className="text-3xl font-bold text-text-primary">{t('operating.title')}</h1>
-        <p className="text-text-muted mt-1">{t('operating.subtitle')}</p>
+        <p className="section-subtitle mt-1">{t('operating.subtitle')}</p>
       </div>
 
       {rows.length === 0 ? (
@@ -129,10 +133,7 @@ export const OperatingPage = () => {
           {/* Mobile cards */}
           <div data-testid="operating-mobile" className="md:hidden space-y-3">
             {mobileVisibleRows.map((row, idx) => (
-              <div
-                key={`${row.code}-${row.date}-${idx}`}
-                className="bg-dark-card rounded-lg border border-border-dark p-4"
-              >
+              <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="text-sm font-semibold text-text-primary truncate">
@@ -142,15 +143,7 @@ export const OperatingPage = () => {
                   </div>
 
                   <div className="shrink-0 text-right">
-                    <div
-                      className={`text-base font-bold ${
-                        Number(row.amount) > 0
-                          ? 'text-success'
-                          : Number(row.amount) < 0
-                            ? 'text-error'
-                            : 'text-text-primary'
-                      }`}
-                    >
+                    <div className={`text-base font-bold ${mobileAmountColor(row)}`}>
                       {Number(row.amount) > 0 ? '+' : ''}
                       {formatCurrency(row.amount)}
                     </div>
@@ -195,7 +188,7 @@ export const OperatingPage = () => {
               <div className="flex items-center gap-2">
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                   onClick={() => setMobilePage((p) => Math.max(1, p - 1))}
                   disabled={mobilePage <= 1}
                 >
@@ -203,7 +196,7 @@ export const OperatingPage = () => {
                 </button>
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                   onClick={() => setMobilePage((p) => Math.min(mobileTotalPages, p + 1))}
                   disabled={mobilePage >= mobileTotalPages}
                 >
@@ -216,11 +209,11 @@ export const OperatingPage = () => {
           {/* Desktop table */}
           <div
             data-testid="operating-desktop"
-            className="hidden md:block overflow-hidden bg-dark-card rounded-lg border border-border-dark"
+            className="hidden md:block overflow-hidden winbit-card !p-0"
           >
             <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-border-dark">
-                <thead className="bg-dark-section">
+              <table className="min-w-full divide-y divide-[rgba(255,255,255,0.08)]">
+                <thead className="bg-[rgba(20,20,20,0.55)]">
                   <tr>
                     <th className="px-4 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
                       {t('operating.table.date')}
@@ -239,7 +232,7 @@ export const OperatingPage = () => {
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-dark-card divide-y divide-border-dark">
+                <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
                   {desktopVisibleRows.map((row, idx) => (
                     <tr key={`${row.code}-${row.date}-${idx}`} className={rowBgClass(row)}>
                       <td className="px-4 py-3 text-sm text-text-primary whitespace-nowrap">
@@ -264,7 +257,7 @@ export const OperatingPage = () => {
             </div>
 
             {shouldPaginateDesktop ? (
-              <div className="flex items-center justify-between gap-4 px-4 py-3 border-t border-border-dark bg-dark-card">
+              <div className="flex items-center justify-between gap-4 px-4 py-3 border-t border-[rgba(255,255,255,0.08)]">
                 <div className="flex items-center gap-3">
                   <div className="text-xs text-text-muted">
                     {t('common.pageOf', 'Página {{page}} de {{total}}', {
@@ -282,7 +275,7 @@ export const OperatingPage = () => {
                     </label>
                     <select
                       id="operating-page-size-desktop"
-                      className="text-xs rounded-lg border border-border-dark bg-dark-card px-2 py-1.5 text-text-primary"
+                      className="text-xs rounded-lg border border-[rgba(255,255,255,0.08)] bg-[rgba(15,18,18,0.8)] px-2 py-1.5 text-text-primary"
                       value={desktopPageSize}
                       onChange={(e) => {
                         const next = Number(e.target.value);
@@ -304,7 +297,7 @@ export const OperatingPage = () => {
                 <div className="flex items-center gap-2">
                   <button
                     type="button"
-                    className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                     onClick={() => setDesktopPage((p) => Math.max(1, p - 1))}
                     disabled={desktopPage <= 1}
                   >
@@ -312,7 +305,7 @@ export const OperatingPage = () => {
                   </button>
                   <button
                     type="button"
-                    className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-border-dark text-text-primary hover:bg-accent-dim disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="px-3 py-1.5 text-xs font-semibold rounded-lg border border-[rgba(255,255,255,0.08)] text-text-primary hover:bg-[rgba(101,167,165,0.08)] disabled:opacity-50 disabled:cursor-not-allowed"
                     onClick={() => setDesktopPage((p) => Math.min(desktopTotalPages, p + 1))}
                     disabled={desktopPage >= desktopTotalPages}
                   >
diff --git a/src/pages/RequestsPage.jsx b/src/pages/RequestsPage.jsx
index db0a939..5c9fe92 100644
--- a/src/pages/RequestsPage.jsx
+++ b/src/pages/RequestsPage.jsx
@@ -18,16 +18,28 @@ const METHOD_LABELS = {
 };
 
 const STATUS_CONFIG = {
-  COMPLETED: { label: 'Completado', cls: 'bg-[rgba(76,175,80,0.15)] text-success' },
-  PENDING: { label: 'Pendiente', cls: 'bg-[rgba(255,152,0,0.15)] text-warning' },
-  REJECTED: { label: 'Rechazado', cls: 'bg-[rgba(239,83,80,0.15)] text-error' },
-  CANCELLED: { label: 'Cancelado', cls: 'bg-dark-section text-text-muted' },
+  COMPLETED: {
+    label: 'Completado',
+    cls: 'badge-completed',
+  },
+  PENDING: {
+    label: 'Pendiente',
+    cls: 'badge-pending',
+  },
+  REJECTED: {
+    label: 'Rechazado',
+    cls: 'badge-rejected',
+  },
+  CANCELLED: {
+    label: 'Cancelado',
+    cls: 'badge-cancelled',
+  },
 };
 
 const statusConfig = (status) =>
   STATUS_CONFIG[String(status ?? '').toUpperCase()] ?? {
     label: status ?? '—',
-    cls: 'bg-dark-section text-text-muted',
+    cls: 'badge-cancelled',
   };
 
 export const RequestsPage = () => {
@@ -56,10 +68,10 @@ export const RequestsPage = () => {
     <div className="space-y-6">
       <div>
         <h1 className="text-3xl font-bold text-text-primary">{t('withdrawals.title')}</h1>
-        <p className="text-text-muted mt-1">{t('withdrawals.subtitle')}</p>
+        <p className="section-subtitle mt-1">{t('withdrawals.subtitle')}</p>
       </div>
 
-      <div className="border-b border-border-dark">
+      <div className="border-b border-[rgba(255,255,255,0.08)]">
         <nav className="-mb-px flex gap-4 md:gap-8 overflow-x-auto scrollbar-hide">
           {[
             { id: 'form', label: t('withdrawals.tabs.newRequest') },
@@ -96,7 +108,7 @@ export const RequestsPage = () => {
               <Spinner size="lg" />
             </div>
           ) : withdrawals.length === 0 ? (
-            <div className="rounded-lg border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
+            <div className="winbit-card text-center text-sm text-text-muted">
               No hay retiros registrados aún.
             </div>
           ) : (
@@ -105,10 +117,7 @@ export const RequestsPage = () => {
                 {withdrawals.map((r) => {
                   const sc = statusConfig(r.status);
                   return (
-                    <div
-                      key={r.id}
-                      className="rounded-lg border border-border-dark bg-dark-card p-4"
-                    >
+                    <div key={r.id} className="winbit-card--compact">
                       <div className="flex items-start justify-between gap-3">
                         <div>
                           <p className="font-semibold text-text-primary">
@@ -130,9 +139,9 @@ export const RequestsPage = () => {
                 })}
               </div>
 
-              <div className="hidden overflow-x-auto rounded-lg border border-border-dark bg-dark-card md:block">
-                <table className="min-w-full divide-y divide-border-dark text-sm">
-                  <thead className="bg-dark-section">
+              <div className="hidden overflow-x-auto winbit-card !p-0 md:block">
+                <table className="min-w-full divide-y divide-[rgba(255,255,255,0.08)] text-sm">
+                  <thead className="bg-[rgba(20,20,20,0.55)]">
                     <tr>
                       {['Fecha', 'Monto', 'Método', 'Estado'].map((h) => (
                         <th
@@ -144,11 +153,11 @@ export const RequestsPage = () => {
                       ))}
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-border-dark">
+                  <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
                     {withdrawals.map((r) => {
                       const sc = statusConfig(r.status);
                       return (
-                        <tr key={r.id} className="hover:bg-accent-dim">
+                        <tr key={r.id} className="hover:bg-[rgba(101,167,165,0.08)]">
                           <td className="px-5 py-3 text-text-primary">{formatDate(r.date)}</td>
                           <td className="px-5 py-3 text-right font-mono font-semibold text-text-primary">
                             {formatCurrency(Number(r.amount))}
diff --git a/src/pages/WalletsPage.jsx b/src/pages/WalletsPage.jsx
index 92928e2..207ec40 100644
--- a/src/pages/WalletsPage.jsx
+++ b/src/pages/WalletsPage.jsx
@@ -20,16 +20,28 @@ const METHOD_LABELS = {
 };
 
 const STATUS_CONFIG = {
-  COMPLETED: { label: 'Acreditado', cls: 'bg-[rgba(76,175,80,0.15)] text-success' },
-  PENDING: { label: 'Pendiente', cls: 'bg-[rgba(255,152,0,0.15)] text-warning' },
-  REJECTED: { label: 'Rechazado', cls: 'bg-[rgba(239,83,80,0.15)] text-error' },
-  CANCELLED: { label: 'Cancelado', cls: 'bg-dark-section text-text-muted' },
+  COMPLETED: {
+    label: 'Acreditado',
+    cls: 'badge-completed',
+  },
+  PENDING: {
+    label: 'Pendiente',
+    cls: 'badge-pending',
+  },
+  REJECTED: {
+    label: 'Rechazado',
+    cls: 'badge-rejected',
+  },
+  CANCELLED: {
+    label: 'Cancelado',
+    cls: 'badge-cancelled',
+  },
 };
 
 const statusConfig = (status) =>
   STATUS_CONFIG[String(status ?? '').toUpperCase()] ?? {
     label: status ?? '—',
-    cls: 'bg-dark-section text-text-muted',
+    cls: 'badge-cancelled',
   };
 
 export const WalletsPage = () => {
@@ -52,7 +64,7 @@ export const WalletsPage = () => {
         <h1 className="text-3xl font-bold text-text-primary">{t('deposits.title')}</h1>
       </div>
 
-      <div className="border-b border-border-dark">
+      <div className="border-b border-[rgba(255,255,255,0.08)]">
         <nav className="-mb-px flex gap-4 md:gap-8 overflow-x-auto scrollbar-hide">
           {[
             { id: 'methods', label: 'Métodos de depósito' },
@@ -77,8 +89,9 @@ export const WalletsPage = () => {
 
       {tab === 'methods' && (
         <div className="space-y-6 py-2">
-          <div className="bg-dark-card rounded-lg border border-border-dark p-4 sm:p-6">
-            <div className="mb-6 border-b border-border-dark pb-4">
+          <p className="section-subtitle">Métodos de depósito</p>
+          <div className="winbit-card">
+            <div className="mb-6 border-b border-[rgba(255,255,255,0.08)] pb-4">
               <h2 className="text-xl font-bold text-text-primary">Métodos de depósito</h2>
               <p className="text-sm text-text-muted mt-2">
                 Realizá tu transferencia o depósito utilizando alguno de los siguientes métodos.
@@ -104,19 +117,17 @@ export const WalletsPage = () => {
                 <Spinner />
               </div>
             ) : error ? (
-              <div className="rounded-lg border border-[rgba(239,83,80,0.3)] bg-[rgba(239,83,80,0.15)] p-4 text-sm text-error">
-                {String(error)}
-              </div>
+              <div className="badge-rejected rounded-lg p-4 text-sm">{String(error)}</div>
             ) : (
               <DepositOptionsList options={depositOptions} />
             )}
 
-            <div className="mt-6 pt-4 border-t border-border-dark text-center">
+            <div className="mt-6 pt-4 border-t border-[rgba(255,255,255,0.08)] text-center">
               <p className="text-sm text-text-muted mb-3">{t('deposits.depositButton')}</p>
               <button
                 type="button"
                 onClick={() => setTab('deposit')}
-                className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white hover:bg-primary/90 transition-colors"
+                className="inline-flex items-center gap-2 rounded-lg bg-[rgba(101,167,165,0.15)] border border-[rgba(101,167,165,0.35)] px-5 py-2.5 text-sm font-medium text-[#8dc8bf] hover:bg-[rgba(101,167,165,0.25)] hover:border-[rgba(101,167,165,0.55)] transition-colors"
               >
                 {t('deposits.depositButtonAction')}
               </button>
@@ -127,9 +138,10 @@ export const WalletsPage = () => {
 
       {tab === 'deposit' && (
         <div className="space-y-6 py-2">
-          <div className="bg-[rgba(101,167,165,0.15)] border border-border-accent rounded-lg p-5">
+          <p className="section-subtitle">Informar depósito</p>
+          <div className="info-box">
             <div className="flex gap-3">
-              <div className="shrink-0 mt-0.5 text-info">
+              <div className="shrink-0 mt-0.5 text-primary">
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path
                     strokeLinecap="round"
@@ -139,10 +151,12 @@ export const WalletsPage = () => {
                   />
                 </svg>
               </div>
-              <p className="text-sm text-info leading-relaxed">
-                <span className="font-bold block mb-1">{t('deposits.warningTitle')}</span>
-                {t('deposits.warningText')}
-              </p>
+              <div className="text-sm leading-relaxed">
+                <span className="font-semibold block mb-1 text-primary">
+                  {t('deposits.warningTitle')}
+                </span>
+                <span className="text-white/[0.88]">{t('deposits.warningText')}</span>
+              </div>
             </div>
           </div>
 
@@ -152,12 +166,13 @@ export const WalletsPage = () => {
 
       {tab === 'history' && (
         <div>
+          <p className="section-subtitle mb-4">Historial</p>
           {historyLoading ? (
             <div className="flex items-center justify-center py-12">
               <Spinner size="lg" />
             </div>
           ) : deposits.length === 0 ? (
-            <div className="rounded-lg border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
+            <div className="winbit-card text-center text-sm text-text-muted">
               No hay depósitos registrados aún.
             </div>
           ) : (
@@ -166,10 +181,7 @@ export const WalletsPage = () => {
                 {deposits.map((r) => {
                   const sc = statusConfig(r.status);
                   return (
-                    <div
-                      key={r.id}
-                      className="rounded-lg border border-border-dark bg-dark-card p-4"
-                    >
+                    <div key={r.id} className="winbit-card--compact">
                       <div className="flex items-start justify-between gap-3">
                         <div>
                           <p className="font-semibold text-text-primary">
@@ -191,9 +203,9 @@ export const WalletsPage = () => {
                 })}
               </div>
 
-              <div className="hidden overflow-x-auto rounded-lg border border-border-dark bg-dark-card md:block">
-                <table className="min-w-full divide-y divide-border-dark text-sm">
-                  <thead className="bg-dark-section">
+              <div className="hidden overflow-x-auto winbit-card !p-0 md:block">
+                <table className="min-w-full divide-y divide-[rgba(255,255,255,0.08)] text-sm">
+                  <thead className="bg-[rgba(20,20,20,0.55)]">
                     <tr>
                       {['Fecha', 'Monto', 'Método', 'Estado'].map((h) => (
                         <th
@@ -205,11 +217,11 @@ export const WalletsPage = () => {
                       ))}
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-border-dark">
+                  <tbody className="divide-y divide-[rgba(255,255,255,0.08)]">
                     {deposits.map((r) => {
                       const sc = statusConfig(r.status);
                       return (
-                        <tr key={r.id} className="hover:bg-accent-dim">
+                        <tr key={r.id} className="hover:bg-[rgba(101,167,165,0.08)]">
                           <td className="px-5 py-3 text-text-primary">{formatDate(r.date)}</td>
                           <td className="px-5 py-3 text-right font-mono font-semibold text-text-primary">
                             {formatCurrency(Number(r.amount))}
diff --git a/tailwind.config.js b/tailwind.config.js
index d488d57..653a25d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,7 @@ export default {
         'accent-dim': 'rgba(101, 167, 165, 0.15)',
         'accent-glow': 'rgba(101, 167, 165, 0.3)',
         dark: {
-          bg: '#0a0a0a',
+          bg: '#0d0f10',
           card: 'rgba(20, 20, 20, 0.5)',
           section: 'rgba(20, 20, 20, 0.55)',
         },
@@ -19,9 +19,9 @@ export default {
         'text-dim': '#555555',
         'border-dark': 'rgba(255, 255, 255, 0.08)',
         'border-accent': 'rgba(101, 167, 165, 0.3)',
-        success: '#4caf50',
-        warning: '#ff9800',
-        error: '#ef5350',
+        success: '#8dc8bf',
+        warning: '#c2aa72',
+        error: '#c46b6b',
         info: '#65a7a5',
       },
       fontFamily: {