diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 854e935..dcb7f2f 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -12,11 +12,101 @@ export const Header = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   const navItems = [
-    { path: '/dashboard', label: t('nav.dashboard') },
-    { path: '/wallets', label: t('nav.deposits') },
-    { path: '/requests', label: t('nav.withdrawals') },
-    { path: '/history', label: t('nav.history') },
-    { path: '/operational', label: t('nav.operating') },
+    {
+      path: '/dashboard',
+      label: t('nav.dashboard'),
+      icon: (
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+          />
+        </svg>
+      ),
+    },
+    {
+      path: '/wallets',
+      label: t('nav.deposits'),
+      icon: (
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+          />
+        </svg>
+      ),
+    },
+    {
+      path: '/requests',
+      label: t('nav.withdrawals'),
+      icon: (
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
+          />
+        </svg>
+      ),
+    },
+    {
+      path: '/history',
+      label: t('nav.history'),
+      icon: (
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+          />
+        </svg>
+      ),
+    },
+    {
+      path: '/operational',
+      label: t('nav.operating'),
+      icon: (
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"
+          />
+        </svg>
+      ),
+    },
   ];
 
   const handleLanguageChange = (lng) => {
@@ -32,7 +122,7 @@ export const Header = () => {
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           <Link to="/dashboard" className="flex items-center gap-2">
-            <span className="text-2xl font-bold text-primary">Winbit</span>
+            <img src="/logo-winbit.png" alt="Winbit" className="h-8" />
           </Link>
 
           {user && (
@@ -41,12 +131,13 @@ export const Header = () => {
                 <Link
                   key={item.path}
                   to={item.path}
-                  className={`font-medium transition-colors ${
+                  className={`flex items-center gap-1.5 font-medium transition-colors ${
                     location.pathname === item.path
                       ? 'text-primary'
                       : 'text-text-muted hover:text-primary'
                   }`}
                 >
+                  <span className="opacity-50">{item.icon}</span>
                   {item.label}
                 </Link>
               ))}
@@ -165,13 +256,14 @@ export const Header = () => {
               <Link
                 key={item.path}
                 to={item.path}
-                className={`rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                   location.pathname === item.path
                     ? 'bg-primary/10 text-primary'
                     : 'text-text-primary hover:bg-accent-dim hover:text-primary'
                 }`}
                 onClick={() => setIsMobileMenuOpen(false)}
               >
+                <span className="opacity-50">{item.icon}</span>
                 {item.label}
               </Link>
             ))}
diff --git a/src/components/layout/Header.test.jsx b/src/components/layout/Header.test.jsx
index 0bfb7fe..0d0eaff 100644
--- a/src/components/layout/Header.test.jsx
+++ b/src/components/layout/Header.test.jsx
@@ -28,7 +28,7 @@ describe('Header', () => {
   it('renders logo', () => {
     useAuth.mockReturnValue({ user: null, logout: vi.fn() });
     renderWithRouter(<Header />);
-    expect(screen.getByText('Winbit')).toBeInTheDocument();
+    expect(screen.getByAltText('Winbit')).toBeInTheDocument();
   });
 
   it('renders navigation when user is logged in', () => {
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
index 4638f1d..ac895b0 100644
--- a/src/components/ui/Button.jsx
+++ b/src/components/ui/Button.jsx
@@ -11,13 +11,13 @@ export const Button = ({
 
   const variants = {
     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',
+      'bg-[rgba(101,167,165,0.2)] text-white border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.3)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
     secondary:
-      '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',
+      'bg-[rgba(101,167,165,0.1)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.2)] 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:
-      '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',
+      'bg-[rgba(101,167,165,0.1)] text-[#8dc8bf] border border-[rgba(101,167,165,0.35)] hover:bg-[rgba(101,167,165,0.2)] hover:border-[rgba(101,167,165,0.55)] focus:ring-primary',
     copy: 'btn-copy text-xs focus:ring-primary',
   };
 
diff --git a/src/components/ui/ConfirmModal.jsx b/src/components/ui/ConfirmModal.jsx
index b38447f..9909acb 100644
--- a/src/components/ui/ConfirmModal.jsx
+++ b/src/components/ui/ConfirmModal.jsx
@@ -26,10 +26,13 @@ export const ConfirmModal = ({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-black transition-opacity" onClick={onCancel} />
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
+        onClick={onCancel}
+      />
 
       <div
-        className="relative w-full max-w-sm rounded-lg border-2 border-[rgba(255,152,0,0.3)] bg-[rgba(255,152,0,0.15)] p-8 backdrop-blur-md"
+        className="relative w-full max-w-sm rounded-lg border border-[rgba(101,167,165,0.25)] bg-[rgba(20,20,20,0.6)] backdrop-blur-xl p-8 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02),0_10px_30px_rgba(0,0,0,0.35)]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="confirm-modal-title"
@@ -63,7 +66,7 @@ export const ConfirmModal = ({
           </div>
 
           {title && (
-            <h3 id="confirm-modal-title" className="text-xl font-bold text-text-primary">
+            <h3 id="confirm-modal-title" className="text-xl font-bold text-white">
               {title}
             </h3>
           )}
@@ -74,14 +77,14 @@ export const ConfirmModal = ({
             <button
               onClick={onConfirm}
               disabled={loading}
-              className="w-full px-6 py-3 bg-primary text-white font-semibold rounded-lg transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
+              className="w-full px-6 py-3 bg-[rgba(101,167,165,0.2)] text-white font-semibold rounded-lg border border-[rgba(101,167,165,0.35)] transition-all duration-200 hover:bg-[rgba(101,167,165,0.3)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
             >
               {loading ? 'Enviando...' : confirmLabel}
             </button>
             <button
               onClick={onCancel}
               disabled={loading}
-              className="w-full px-6 py-3 bg-dark-section border border-border-dark text-text-primary font-semibold rounded-lg transition-colors hover:bg-accent-dim focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
+              className="w-full px-6 py-3 bg-dark-section border border-border-dark text-text-primary font-semibold rounded-lg transition-all duration-200 hover:bg-accent-dim focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary disabled:opacity-60"
             >
               {cancelLabel}
             </button>
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
index 49ce3fa..79c8c97 100644
--- a/src/components/ui/Modal.jsx
+++ b/src/components/ui/Modal.jsx
@@ -15,30 +15,18 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {
 
   if (!isOpen) return null;
 
-  const bgColorClass =
-    type === 'success'
-      ? 'bg-[rgba(76,175,80,0.15)] border-[rgba(76,175,80,0.3)]'
-      : type === 'error'
-        ? 'bg-[rgba(239,83,80,0.15)] border-[rgba(239,83,80,0.3)]'
-        : 'bg-[rgba(101,167,165,0.15)] border-[rgba(101,167,165,0.3)]';
-
   const iconColorClass =
     type === 'success' ? 'text-success' : type === 'error' ? 'text-error' : 'text-primary';
 
-  const buttonColorClass =
-    type === 'success'
-      ? 'bg-success hover:bg-success/80 focus:ring-success'
-      : type === 'error'
-        ? 'bg-error hover:bg-error/80 focus:ring-error'
-        : 'bg-primary hover:bg-primary/80 focus:ring-primary';
-
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      {/* Backdrop */}
-      <div className="absolute inset-0 bg-black transition-opacity" onClick={onClose} />
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity"
+        onClick={onClose}
+      />
 
       <div
-        className={`relative w-full max-w-sm rounded-lg border-2 p-8 backdrop-blur-md ${bgColorClass}`}
+        className="relative w-full max-w-sm rounded-lg border border-[rgba(101,167,165,0.25)] bg-[rgba(20,20,20,0.6)] backdrop-blur-xl p-8 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.02),0_10px_30px_rgba(0,0,0,0.35)]"
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"
@@ -92,7 +80,7 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {
 
           <div className="space-y-2">
             {title && (
-              <h3 id="modal-title" className="text-xl font-bold text-text-primary">
+              <h3 id="modal-title" className="text-xl font-bold text-white">
                 {title}
               </h3>
             )}
@@ -101,7 +89,7 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {
 
           <button
             onClick={onClose}
-            className={`w-full mt-2 px-6 py-3 text-white font-semibold rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg ${buttonColorClass}`}
+            className="w-full mt-2 px-6 py-3 bg-[rgba(101,167,165,0.2)] text-white font-semibold rounded-lg border border-[rgba(101,167,165,0.35)] transition-all duration-200 hover:bg-[rgba(101,167,165,0.3)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg focus:ring-primary"
           >
             Aceptar
           </button>
diff --git a/src/index.css b/src/index.css
index c533e0f..73f18d5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,10 +4,12 @@
 
 @layer base {
   body {
-    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;
+    background: radial-gradient(
+      circle at 30% 20%,
+      rgba(31, 122, 99, 0.25),
+      rgba(11, 15, 14, 1) 60%
+    );
+    background-color: #0b0f0e;
     color: #e8e8e8;
     font-family:
       'Montserrat',
@@ -21,18 +23,20 @@
   input,
   select,
   textarea {
-    background: rgba(15, 18, 18, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #121716;
+    color: #ffffff;
+    border: 1px solid rgba(101, 167, 165, 0.25);
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
-    color: #e8e8e8;
     font-family:
       'Montserrat',
       -apple-system,
       BlinkMacSystemFont,
       sans-serif;
     font-size: 0.95rem;
-    transition: border-color 0.2s ease;
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
   }
 
   input::placeholder,
@@ -45,8 +49,8 @@
   select:focus,
   textarea:focus {
     outline: none;
-    border-color: rgba(101, 167, 165, 0.5);
-    box-shadow: 0 0 0 2px rgba(101, 167, 165, 0.15);
+    border-color: #65a7a5;
+    box-shadow: 0 0 0 1px rgba(101, 167, 165, 0.3);
   }
 }
 
@@ -56,39 +60,80 @@
   }
 
   .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);
+    background: rgba(20, 20, 20, 0.6);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border: 1px solid rgba(101, 167, 165, 0.25);
     border-radius: 8px;
-    padding: 28px 26px;
+    padding: 32px 30px;
     box-shadow:
-      inset 3px 0 0 rgba(101, 167, 165, 0.22),
-      0 10px 28px rgba(0, 0, 0, 0.22);
+      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+      0 10px 30px rgba(0, 0, 0, 0.35);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .winbit-card:hover {
+    transform: translateY(-2px);
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+      0 14px 36px rgba(0, 0, 0, 0.4);
   }
 
   .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);
+    background: rgba(20, 20, 20, 0.6);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border: 1px solid rgba(101, 167, 165, 0.35);
     border-radius: 8px;
-    padding: 28px 26px;
+    padding: 32px 30px;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+      0 12px 32px rgba(0, 0, 0, 0.38);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .winbit-card--highlight:hover {
+    transform: translateY(-2px);
     box-shadow:
-      inset 4px 0 0 rgba(101, 167, 165, 0.3),
-      0 12px 30px rgba(0, 0, 0, 0.24);
+      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
+      0 16px 40px rgba(0, 0, 0, 0.42);
   }
 
   .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);
+    background: rgba(20, 20, 20, 0.6);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border: 1px solid rgba(101, 167, 165, 0.25);
     border-radius: 8px;
-    padding: 20px 22px;
+    padding: 24px 26px;
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.02),
+      0 10px 30px rgba(0, 0, 0, 0.35);
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .winbit-card--compact:hover {
+    transform: translateY(-2px);
     box-shadow:
-      inset 3px 0 0 rgba(101, 167, 165, 0.22),
-      0 10px 28px rgba(0, 0, 0, 0.22);
+      inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+      0 14px 36px rgba(0, 0, 0, 0.4);
+  }
+
+  .card-inner {
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 6px;
+    padding: 16px;
   }
 
   .section-subtitle {
     color: #65a7a5;
     padding-bottom: 8px;
-    border-bottom: 1px solid rgba(101, 167, 165, 0.35);
     font-size: 0.95rem;
     margin-top: 4px;
   }
@@ -133,11 +178,12 @@
   }
 
   .row-negative {
-    background: rgba(196, 107, 107, 0.1);
+    color: #d16b6b;
+    background: rgba(209, 107, 107, 0.08);
   }
 
   .row-negative:hover {
-    background: rgba(196, 107, 107, 0.16);
+    background: rgba(209, 107, 107, 0.14);
   }
 
   .row-fee {
@@ -150,7 +196,7 @@
 
   .btn-copy {
     background: rgba(101, 167, 165, 0.1);
-    border: 1px solid rgba(101, 167, 165, 0.35);
+    border: 1px solid rgba(101, 167, 165, 0.4);
     color: #8dc8bf;
     border-radius: 6px;
     padding: 8px 16px;
diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx
index 5d1ce0c..fc49077 100644
--- a/src/pages/DashboardPage.jsx
+++ b/src/pages/DashboardPage.jsx
@@ -442,7 +442,7 @@ export const DashboardPage = () => {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
         <h1 className="text-3xl font-bold text-text-primary">
           {t('dashboard.welcomeBack', { name: formatName(data.name) })}
@@ -451,7 +451,7 @@ export const DashboardPage = () => {
       </div>
 
       {/* Row 1: Valor del portfolio + Capital invertido */}
-      <div className="grid gap-4 md:grid-cols-2 mb-6">
+      <div className="grid gap-6 md:grid-cols-2 mb-6">
         <KpiCard
           title={t('dashboard.kpis.currentValue')}
           value={data.balance}
@@ -467,7 +467,7 @@ export const DashboardPage = () => {
       </div>
 
       {/* Row 2: Resultado histórico (%) + Resultado histórico (USD) */}
-      <div className="grid gap-4 md:grid-cols-2 mb-4">
+      <div className="grid gap-6 md:grid-cols-2 mb-4">
         <KpiCard
           title={t('dashboard.kpis.strategyReturnAllPct')}
           value={data.strategyReturnAllPct ?? 0}
@@ -482,7 +482,7 @@ export const DashboardPage = () => {
       </div>
 
       {/* Row 3: Resultado estrategia actual (%) + Resultado estrategia actual (USD) */}
-      <div className="grid gap-4 md:grid-cols-2 mb-4">
+      <div className="grid gap-6 md:grid-cols-2 mb-4">
         <KpiCard
           title={t('dashboard.kpis.strategyReturnYtdPct')}
           value={data.strategyReturnYtdPct ?? 0}
diff --git a/src/pages/OperatingPage.jsx b/src/pages/OperatingPage.jsx
index cd8208d..bf96957 100644
--- a/src/pages/OperatingPage.jsx
+++ b/src/pages/OperatingPage.jsx
@@ -136,7 +136,7 @@ export const OperatingPage = () => {
               <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">
+                    <div className="text-sm font-semibold text-text-primary whitespace-normal break-words">
                       {formatDate(row.date)}
                     </div>
                     <div className="text-xs text-text-muted mt-1">{movementText(row, t)}</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 653a25d..8abb1d3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,8 +10,8 @@ export default {
         'accent-dim': 'rgba(101, 167, 165, 0.15)',
         'accent-glow': 'rgba(101, 167, 165, 0.3)',
         dark: {
-          bg: '#0d0f10',
-          card: 'rgba(20, 20, 20, 0.5)',
+          bg: '#0B0F0E',
+          card: 'rgba(20, 20, 20, 0.6)',
           section: 'rgba(20, 20, 20, 0.55)',
         },
         'text-primary': '#e8e8e8',