diff --git a/index.html b/index.html
index 3788493..e59fcdc 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Winbit - Webapp" />
-    <meta name="theme-color" content="#58b098" />
+    <meta name="theme-color" content="#65a7a5" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/src/App.jsx b/src/App.jsx
index 5725707..1bb6e37 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -37,7 +37,7 @@ export const App = () => {
   return (
     <ErrorBoundary>
       <AuthProvider>
-        <div className="min-h-screen flex flex-col bg-gray-50">
+        <div className="min-h-screen flex flex-col bg-dark-bg">
           <Suspense fallback={<PageFallback />}>
             <Routes>
               <Route path="/login" element={<LoginPage />} />
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
index a0f2109..17a00ab 100644
--- a/src/components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.jsx
@@ -17,17 +17,17 @@ export class ErrorBoundary extends Component {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
-          <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
-            <div className="text-red-500 text-6xl mb-4">⚠️</div>
-            <h1 className="text-2xl font-bold text-gray-900 mb-2">Something went wrong</h1>
-            <p className="text-gray-600 mb-6">
+        <div className="min-h-screen flex items-center justify-center bg-dark-bg px-4">
+          <div className="max-w-md w-full bg-dark-card rounded-lg border border-border-dark p-8 text-center backdrop-blur-sm">
+            <div className="text-error text-6xl mb-4">⚠️</div>
+            <h1 className="text-2xl font-bold text-text-primary mb-2">Something went wrong</h1>
+            <p className="text-text-muted mb-6">
               We&apos;re sorry, but something unexpected happened. Please refresh the page to try
               again.
             </p>
             <button
               onClick={() => window.location.reload()}
-              className="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
+              className="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors"
             >
               Refresh Page
             </button>
diff --git a/src/components/features/dashboard/KpiCard.jsx b/src/components/features/dashboard/KpiCard.jsx
index 7ea6ac3..c05eda7 100644
--- a/src/components/features/dashboard/KpiCard.jsx
+++ b/src/components/features/dashboard/KpiCard.jsx
@@ -21,28 +21,28 @@ export const KpiCard = ({
 
   const cardClassName =
     resolvedTone === 'highlight'
-      ? 'bg-gradient-to-r from-[#58b098] to-[#4a9d84] text-white shadow-lg'
+      ? 'bg-gradient-to-r from-primary to-[#4a9d8e] text-white'
       : resolvedTone === 'neutral'
-        ? 'bg-gradient-to-r from-sky-50 to-sky-100 border border-sky-200 text-slate-900'
+        ? 'bg-[rgba(101,167,165,0.06)] border border-border-accent'
         : 'bg-dark-card';
 
   const titleClassName =
     resolvedTone === 'highlight'
       ? 'text-sm text-white/90'
       : resolvedTone === 'neutral'
-        ? 'text-sm text-sky-700'
+        ? '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-slate-900'
+        ? '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-1 hover:shadow-lg`}
+      className={`${cardClassName} 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 0e0b9bf..c292478 100644
--- a/src/components/features/deposits/DepositOptionCard.jsx
+++ b/src/components/features/deposits/DepositOptionCard.jsx
@@ -31,7 +31,7 @@ export const DepositOptionCard = ({ option }) => {
   const detailEntries = Object.entries(details).filter(([, v]) => v);
 
   return (
-    <Card className="hover:shadow-lg transition-shadow">
+    <Card className="transition-colors hover:border-border-accent">
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <h4 className="font-semibold text-text-primary">{option.label}</h4>
diff --git a/src/components/features/wallets/WalletCard.jsx b/src/components/features/wallets/WalletCard.jsx
index fc3befc..0d0b1d7 100644
--- a/src/components/features/wallets/WalletCard.jsx
+++ b/src/components/features/wallets/WalletCard.jsx
@@ -19,13 +19,15 @@ export const WalletCard = ({ network, address, icon }) => {
   };
 
   return (
-    <Card className="hover:shadow-lg transition-shadow">
+    <Card>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           {icon && <span className="text-2xl">{icon}</span>}
           <div>
-            <h4 className="font-semibold text-gray-900">{network}</h4>
-            <p className="text-sm text-gray-600 font-mono mt-1">{truncateAddress(address, 8, 6)}</p>
+            <h4 className="font-semibold text-text-primary">{network}</h4>
+            <p className="text-sm text-text-muted font-mono mt-1">
+              {truncateAddress(address, 8, 6)}
+            </p>
           </div>
         </div>
 
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
index 48e2747..f8e419b 100644
--- a/src/components/ui/Button.jsx
+++ b/src/components/ui/Button.jsx
@@ -7,15 +7,15 @@ export const Button = ({
   className = '',
 }) => {
   const baseStyles =
-    'px-6 py-3 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-bg disabled:opacity-50 disabled:cursor-not-allowed';
+    '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',
     secondary:
-      'bg-dark-section text-text-primary border border-border-dark hover:bg-accent-dim focus:ring-primary',
+      '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',
     outline:
-      'border-2 border-primary text-primary hover:bg-primary hover:text-white focus:ring-primary',
+      'border border-[rgba(101,167,165,0.45)] text-primary bg-accent-dim hover:bg-accent-glow hover:border-primary focus:ring-primary',
   };
 
   return (
diff --git a/src/components/ui/Button.test.jsx b/src/components/ui/Button.test.jsx
index 60bd5c3..f73e303 100644
--- a/src/components/ui/Button.test.jsx
+++ b/src/components/ui/Button.test.jsx
@@ -24,7 +24,7 @@ describe('Button', () => {
   it('applies secondary variant styles', () => {
     render(<Button variant="secondary">Secondary</Button>);
     const button = screen.getByText('Secondary');
-    expect(button).toHaveClass('bg-dark-section');
+    expect(button).toHaveClass('bg-accent-dim');
   });
 
   it('applies danger variant styles', () => {
@@ -36,7 +36,7 @@ describe('Button', () => {
   it('applies outline variant styles', () => {
     render(<Button variant="outline">Outline</Button>);
     const button = screen.getByText('Outline');
-    expect(button).toHaveClass('border-2');
+    expect(button).toHaveClass('bg-accent-dim');
   });
 
   it('disables button when disabled prop is true', () => {
diff --git a/src/components/ui/Card.jsx b/src/components/ui/Card.jsx
index 25737d2..90f196c 100644
--- a/src/components/ui/Card.jsx
+++ b/src/components/ui/Card.jsx
@@ -1,6 +1,8 @@
 export const Card = ({ children, className = '', title }) => {
   return (
-    <div className={`bg-dark-card rounded-lg border border-border-dark p-6 ${className}`}>
+    <div
+      className={`bg-dark-card rounded-lg border border-border-dark p-6 backdrop-blur-sm ${className}`}
+    >
       {title && <h3 className="text-xl font-semibold mb-4 text-text-primary">{title}</h3>}
       {children}
     </div>
diff --git a/src/components/ui/ConfirmModal.jsx b/src/components/ui/ConfirmModal.jsx
index c68d45d..47082c8 100644
--- a/src/components/ui/ConfirmModal.jsx
+++ b/src/components/ui/ConfirmModal.jsx
@@ -29,7 +29,7 @@ export const ConfirmModal = ({
       <div className="absolute inset-0 bg-black/70 transition-opacity" onClick={onCancel} />
 
       <div
-        className="relative w-full max-w-sm rounded-2xl border-2 border-[rgba(255,152,0,0.3)] bg-[rgba(255,152,0,0.15)] p-8"
+        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"
         role="dialog"
         aria-modal="true"
         aria-labelledby="confirm-modal-title"
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
index ec9a921..cc6ff85 100644
--- a/src/components/ui/Modal.jsx
+++ b/src/components/ui/Modal.jsx
@@ -38,7 +38,7 @@ export const Modal = ({ isOpen, onClose, title, message, type = 'info' }) => {
       <div className="absolute inset-0 bg-black/70 transition-opacity" onClick={onClose} />
 
       <div
-        className={`relative w-full max-w-sm rounded-2xl border-2 p-8 ${bgColorClass}`}
+        className={`relative w-full max-w-sm rounded-lg border-2 p-8 backdrop-blur-md ${bgColorClass}`}
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"
diff --git a/src/components/ui/Toast.jsx b/src/components/ui/Toast.jsx
index 58e5ab5..0839f89 100644
--- a/src/components/ui/Toast.jsx
+++ b/src/components/ui/Toast.jsx
@@ -10,21 +10,21 @@ export const Toast = ({ title, message, type = 'success', onClose, duration = 30
   }, [duration, onClose]);
 
   const types = {
-    success: 'bg-green-500',
-    error: 'bg-red-500',
-    info: 'bg-blue-500',
+    success: 'bg-success',
+    error: 'bg-error',
+    info: 'bg-primary',
   };
 
   return (
     <div className="fixed top-4 right-4 z-50 animate-slide-in">
       <div
-        className={`${types[type]} text-white px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 min-w-[300px]`}
+        className={`${types[type]} text-white px-6 py-4 rounded-lg flex items-center gap-3 min-w-[300px]`}
       >
         <div className="flex-1">
           {title && <div className="font-semibold">{title}</div>}
           <div className={title ? 'text-sm opacity-95 mt-0.5' : ''}>{message}</div>
         </div>
-        <button onClick={onClose} className="text-white hover:text-gray-200 transition-colors">
+        <button onClick={onClose} className="text-white/80 hover:text-white transition-colors">
           ✕
         </button>
       </div>
diff --git a/src/components/ui/Toast.test.jsx b/src/components/ui/Toast.test.jsx
index d817c7d..bca74db 100644
--- a/src/components/ui/Toast.test.jsx
+++ b/src/components/ui/Toast.test.jsx
@@ -18,13 +18,13 @@ describe('Toast', () => {
     const { rerender, container } = render(
       <Toast message="Ok" type="success" onClose={() => {}} />,
     );
-    expect(container.querySelector('.bg-green-500')).toBeInTheDocument();
+    expect(container.querySelector('.bg-success')).toBeInTheDocument();
 
     rerender(<Toast message="Err" type="error" onClose={() => {}} />);
-    expect(container.querySelector('.bg-red-500')).toBeInTheDocument();
+    expect(container.querySelector('.bg-error')).toBeInTheDocument();
 
     rerender(<Toast message="Info" type="info" onClose={() => {}} />);
-    expect(container.querySelector('.bg-blue-500')).toBeInTheDocument();
+    expect(container.querySelector('.bg-primary')).toBeInTheDocument();
   });
 
   it('calls onClose when close button is clicked', () => {
diff --git a/src/index.css b/src/index.css
index 88d1d54..76bdca2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,8 @@
       -apple-system,
       BlinkMacSystemFont,
       sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
   }
 
   input,
@@ -19,7 +21,7 @@
     background: rgba(20, 20, 20, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 0.5rem;
-    padding: 0.625rem 1rem;
+    padding: 0.75rem 1rem;
     color: #e8e8e8;
     font-family:
       'Montserrat',
diff --git a/src/pages/ChangePasswordPage.jsx b/src/pages/ChangePasswordPage.jsx
index 75d1af4..68b7882 100644
--- a/src/pages/ChangePasswordPage.jsx
+++ b/src/pages/ChangePasswordPage.jsx
@@ -49,21 +49,23 @@ export const ChangePasswordPage = () => {
 
   return (
     <div className="max-w-lg mx-auto">
-      <h1 className="text-2xl font-bold text-gray-900 mb-2">{t('auth.changePassword.title')}</h1>
-      <p className="text-sm text-gray-600 mb-6">{t('auth.changePassword.subtitle')}</p>
+      <h1 className="text-2xl font-bold text-text-primary mb-2">
+        {t('auth.changePassword.title')}
+      </h1>
+      <p className="text-sm text-text-muted mb-6">{t('auth.changePassword.subtitle')}</p>
 
       {!isEmailUser && (
-        <div className="p-4 bg-amber-50 text-amber-800 rounded-lg text-sm mb-6">
+        <div className="p-4 bg-[rgba(255,152,0,0.15)] text-warning rounded-lg text-sm mb-6">
           {t('auth.changePassword.googleInfo')}
         </div>
       )}
 
-      <div className="bg-white rounded-xl shadow p-6">
+      <div className="bg-dark-card rounded-lg border border-border-dark p-6 backdrop-blur-sm">
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label
               htmlFor="current-password"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-text-primary mb-1"
             >
               {t('auth.changePassword.current')}
             </label>
@@ -73,13 +75,16 @@ export const ChangePasswordPage = () => {
               required
               value={currentPassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              className="w-full rounded-lg border border-border-dark bg-dark-section px-4 py-3 text-sm text-text-primary placeholder:text-text-dim focus:border-border-accent focus:ring-2 focus:ring-accent-dim outline-none"
               autoComplete="current-password"
             />
           </div>
 
           <div>
-            <label htmlFor="new-password" className="block text-sm font-medium text-gray-700 mb-1">
+            <label
+              htmlFor="new-password"
+              className="block text-sm font-medium text-text-primary mb-1"
+            >
               {t('auth.changePassword.new')}
             </label>
             <input
@@ -88,7 +93,7 @@ export const ChangePasswordPage = () => {
               required
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              className="w-full rounded-lg border border-border-dark bg-dark-section px-4 py-3 text-sm text-text-primary placeholder:text-text-dim focus:border-border-accent focus:ring-2 focus:ring-accent-dim outline-none"
               minLength={6}
               autoComplete="new-password"
             />
@@ -97,7 +102,7 @@ export const ChangePasswordPage = () => {
           <div>
             <label
               htmlFor="confirm-password"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-text-primary mb-1"
             >
               {t('auth.changePassword.confirm')}
             </label>
@@ -107,16 +112,20 @@ export const ChangePasswordPage = () => {
               required
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
+              className="w-full rounded-lg border border-border-dark bg-dark-section px-4 py-3 text-sm text-text-primary placeholder:text-text-dim focus:border-border-accent focus:ring-2 focus:ring-accent-dim outline-none"
               minLength={6}
               autoComplete="new-password"
             />
           </div>
 
-          {error && <div className="p-3 bg-red-50 text-red-800 rounded-lg text-sm">{error}</div>}
+          {error && (
+            <div className="p-3 bg-[rgba(239,83,80,0.15)] text-error rounded-lg text-sm">
+              {error}
+            </div>
+          )}
 
           {success && (
-            <div className="p-3 bg-green-50 text-green-800 rounded-lg text-sm">
+            <div className="p-3 bg-[rgba(76,175,80,0.15)] text-success rounded-lg text-sm">
               {t('auth.changePassword.success')}
             </div>
           )}
diff --git a/src/pages/HistoryPage.jsx b/src/pages/HistoryPage.jsx
index a62274a..2668168 100644
--- a/src/pages/HistoryPage.jsx
+++ b/src/pages/HistoryPage.jsx
@@ -411,7 +411,7 @@ export const HistoryPage = () => {
             {mobileVisibleRows.map((row, idx) => (
               <div
                 key={`${row.code}-${row.date}-${idx}`}
-                className="bg-dark-card rounded-xl border border-border-dark p-4"
+                className="bg-dark-card rounded-lg border border-border-dark p-4"
               >
                 <div className="flex items-start justify-between gap-3 mb-1">
                   <div className="min-w-0">
@@ -508,7 +508,7 @@ export const HistoryPage = () => {
           {/* Desktop table */}
           <div
             data-testid="history-desktop"
-            className="hidden md:block overflow-hidden bg-dark-card rounded-xl border border-border-dark"
+            className="hidden md:block overflow-hidden bg-dark-card rounded-lg border border-border-dark"
           >
             <div className="overflow-x-auto">
               <table className="min-w-full divide-y divide-border-dark">
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index d39ac6a..1d729d9 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -78,7 +78,7 @@ export const LoginPage = () => {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-dark-bg px-4">
-      <div className="max-w-md w-full bg-dark-card rounded-2xl border border-border-dark p-8">
+      <div className="max-w-md w-full bg-dark-card rounded-lg border border-border-dark p-8 backdrop-blur-sm">
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold text-primary mb-2">Winbit</h1>
           <p className="text-text-muted">{t('auth.login.subtitle')}</p>
diff --git a/src/pages/OperatingPage.jsx b/src/pages/OperatingPage.jsx
index 39e33ef..54e758b 100644
--- a/src/pages/OperatingPage.jsx
+++ b/src/pages/OperatingPage.jsx
@@ -131,7 +131,7 @@ export const OperatingPage = () => {
             {mobileVisibleRows.map((row, idx) => (
               <div
                 key={`${row.code}-${row.date}-${idx}`}
-                className="bg-dark-card rounded-xl border border-border-dark p-4"
+                className="bg-dark-card rounded-lg border border-border-dark p-4"
               >
                 <div className="flex items-start justify-between gap-3 mb-1">
                   <div className="min-w-0">
@@ -216,7 +216,7 @@ export const OperatingPage = () => {
           {/* Desktop table */}
           <div
             data-testid="operating-desktop"
-            className="hidden md:block overflow-hidden bg-dark-card rounded-xl border border-border-dark"
+            className="hidden md:block overflow-hidden bg-dark-card rounded-lg border border-border-dark"
           >
             <div className="overflow-x-auto">
               <table className="min-w-full divide-y divide-border-dark">
diff --git a/src/pages/RequestsPage.jsx b/src/pages/RequestsPage.jsx
index f288e63..db0a939 100644
--- a/src/pages/RequestsPage.jsx
+++ b/src/pages/RequestsPage.jsx
@@ -96,7 +96,7 @@ export const RequestsPage = () => {
               <Spinner size="lg" />
             </div>
           ) : withdrawals.length === 0 ? (
-            <div className="rounded-xl border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
+            <div className="rounded-lg border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
               No hay retiros registrados aún.
             </div>
           ) : (
@@ -107,7 +107,7 @@ export const RequestsPage = () => {
                   return (
                     <div
                       key={r.id}
-                      className="rounded-xl border border-border-dark bg-dark-card p-4"
+                      className="rounded-lg border border-border-dark bg-dark-card p-4"
                     >
                       <div className="flex items-start justify-between gap-3">
                         <div>
@@ -130,7 +130,7 @@ export const RequestsPage = () => {
                 })}
               </div>
 
-              <div className="hidden overflow-x-auto rounded-xl border border-border-dark bg-dark-card md:block">
+              <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">
                     <tr>
diff --git a/src/pages/WalletsPage.jsx b/src/pages/WalletsPage.jsx
index bbd1461..92928e2 100644
--- a/src/pages/WalletsPage.jsx
+++ b/src/pages/WalletsPage.jsx
@@ -77,7 +77,7 @@ export const WalletsPage = () => {
 
       {tab === 'methods' && (
         <div className="space-y-6 py-2">
-          <div className="bg-dark-card rounded-xl border border-border-dark p-4 sm:p-6">
+          <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">
               <h2 className="text-xl font-bold text-text-primary">Métodos de depósito</h2>
               <p className="text-sm text-text-muted mt-2">
@@ -157,7 +157,7 @@ export const WalletsPage = () => {
               <Spinner size="lg" />
             </div>
           ) : deposits.length === 0 ? (
-            <div className="rounded-xl border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
+            <div className="rounded-lg border border-border-dark bg-dark-card p-8 text-center text-sm text-text-muted">
               No hay depósitos registrados aún.
             </div>
           ) : (
@@ -168,7 +168,7 @@ export const WalletsPage = () => {
                   return (
                     <div
                       key={r.id}
-                      className="rounded-xl border border-border-dark bg-dark-card p-4"
+                      className="rounded-lg border border-border-dark bg-dark-card p-4"
                     >
                       <div className="flex items-start justify-between gap-3">
                         <div>
@@ -191,7 +191,7 @@ export const WalletsPage = () => {
                 })}
               </div>
 
-              <div className="hidden overflow-x-auto rounded-xl border border-border-dark bg-dark-card md:block">
+              <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">
                     <tr>