diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 311f145..d39b6ce 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -150,7 +150,7 @@ const App = () => {
 
   const handleVerifyTwoFactor = async (code) => {
     if (!authState.preAuthToken) {
-      showFeedback('warning', 'Primero inicia sesion con usuario y clave')
+      showFeedback('warning', 'Primero inicia sesion con usuario y contraseña')
       return
     }
 
@@ -203,12 +203,12 @@ const App = () => {
   }, [authState.accessToken])
 
   return (
-    <main className="min-vh-100 d-flex align-items-center justify-content-center bg-dark-subtle">
+    <main className="app-shell">
       <div className="container py-5">
         <div className="row justify-content-center">
           <div className="col-12 col-md-8 col-lg-6">
-            <div className="card shadow-lg bg-dark text-light border-0">
-              <div className="card-body p-4 p-md-5">
+            <div className="card app-card shadow-lg border-0">
+              <div className="card-body app-card-body p-4 p-md-5">
                 <h1 className="h3 text-center mb-4">Portal 2FA</h1>
                 <AlertMessage
                   type={feedback.type}
@@ -219,7 +219,7 @@ const App = () => {
                 {step === 'login' && (
                   <>
                     <ul className="nav nav-pills mb-4" role="tablist">
-                      <li className="nav-item" role="presentation">
+                      <li className="nav-item me-2" role="presentation">
                         <button
                           className={`nav-link ${activeTab === 'login' ? 'active' : ''}`}
                           type="button"
@@ -289,13 +289,13 @@ const App = () => {
 
                 {step === 'dashboard' && (
                   <div className="d-flex flex-column gap-3">
-                    <div className="bg-dark-subtle rounded p-3">
+                    <div className="panel-surface rounded p-3">
                       <h2 className="h5">Token de acceso</h2>
                       <code className="small text-break">{authState.accessToken}</code>
                     </div>
 
                     {tokenPayload && (
-                      <div className="bg-dark-subtle rounded p-3">
+                      <div className="panel-surface rounded p-3">
                         <h2 className="h5">Payload decodificado</h2>
                         <pre className="small text-break mb-0">
                           {JSON.stringify(tokenPayload, null, 2)}
@@ -314,7 +314,7 @@ const App = () => {
 
                     {users.length > 0 && (
                       <div className="table-responsive">
-                        <table className="table table-dark table-striped table-bordered align-middle mb-0">
+                        <table className="table theme-table align-middle mb-0">
                           <thead>
                             <tr>
                               <th scope="col">ID</th>
@@ -338,7 +338,7 @@ const App = () => {
                 {step !== 'login' && step !== 'dashboard' && (
                   <button
                     type="button"
-                    className="btn btn-outline-light mt-4"
+                    className="btn btn-danger mt-4 ms-3"
                     onClick={resetFlow}
                   >
                     Cancelar
diff --git a/frontend/src/components/forms/Enable2FA.jsx b/frontend/src/components/forms/Enable2FA.jsx
index 161c9cd..0e4e331 100644
--- a/frontend/src/components/forms/Enable2FA.jsx
+++ b/frontend/src/components/forms/Enable2FA.jsx
@@ -1,24 +1,24 @@
 const Enable2FA = ({ secret, otpauthUrl, qrBase64, onBack, onRefresh, isLoading }) => {
   return (
     <div className="d-flex flex-column gap-3">
-      <p>Escanea el codigo o introduce la clave manualmente en tu app TOTP.</p>
+  <p className="text-white">Escanea el codigo o introduce la contraseña manualmente en tu app TOTP.</p>
       {qrBase64 ? (
         <img
           src={`data:image/png;base64,${qrBase64}`}
           alt="Codigo QR 2FA"
-          className="align-self-center border rounded"
+          className="align-self-center qr-frame"
           style={{ width: '220px', height: '220px' }}
         />
       ) : (
         <div className="alert alert-warning" role="alert">
-          No se pudo generar la imagen QR. Usa la clave manual.
+          No se pudo generar la imagen QR. Usa la contraseña manual.
         </div>
       )}
-      <div className="bg-dark-subtle rounded p-3">
+      <div className="panel-surface rounded p-3">
         <strong>Clave TOTP:</strong>
         <div className="mt-2 text-break">{secret}</div>
       </div>
-      <div className="bg-dark-subtle rounded p-3">
+      <div className="panel-surface rounded p-3">
         <strong>URL OTPAuth:</strong>
         <div className="mt-2 text-break">{otpauthUrl}</div>
       </div>
diff --git a/frontend/src/components/forms/LoginForm.jsx b/frontend/src/components/forms/LoginForm.jsx
index 720fbb7..735e937 100644
--- a/frontend/src/components/forms/LoginForm.jsx
+++ b/frontend/src/components/forms/LoginForm.jsx
@@ -32,7 +32,7 @@ const LoginForm = ({ onSubmit, isLoading }) => {
         />
       </div>
       <div>
-        <label htmlFor="password" className="form-label">Clave</label>
+        <label htmlFor="password" className="form-label">Contraseña</label>
         <input
           id="password"
           name="password"
diff --git a/frontend/src/components/forms/RegisterForm.jsx b/frontend/src/components/forms/RegisterForm.jsx
index 92171e7..fddc987 100644
--- a/frontend/src/components/forms/RegisterForm.jsx
+++ b/frontend/src/components/forms/RegisterForm.jsx
@@ -17,7 +17,7 @@ const RegisterForm = ({ onSubmit, isLoading }) => {
   const handleSubmit = (event) => {
     event.preventDefault()
     if (formState.password !== formState.confirmPassword) {
-      setLocalError('Las claves no coinciden')
+      setLocalError('Las contraseñas no coinciden')
       return
     }
     onSubmit({ user_name: formState.user_name, password: formState.password })
@@ -38,7 +38,7 @@ const RegisterForm = ({ onSubmit, isLoading }) => {
         />
       </div>
       <div>
-        <label htmlFor="register-password" className="form-label">Clave</label>
+        <label htmlFor="register-password" className="form-label">Contraseña</label>
         <input
           id="register-password"
           name="password"
@@ -50,7 +50,7 @@ const RegisterForm = ({ onSubmit, isLoading }) => {
         />
       </div>
       <div>
-        <label htmlFor="register-confirm" className="form-label">Repetir clave</label>
+        <label htmlFor="register-confirm" className="form-label">Repetir contraseña</label>
         <input
           id="register-confirm"
           name="confirmPassword"
diff --git a/frontend/src/components/forms/TotpForm.jsx b/frontend/src/components/forms/TotpForm.jsx
index ffbc4bb..dfefeb7 100644
--- a/frontend/src/components/forms/TotpForm.jsx
+++ b/frontend/src/components/forms/TotpForm.jsx
@@ -30,7 +30,7 @@ const TotpForm = ({ onSubmit, isLoading, onBack }) => {
         {onBack && (
           <button
             type="button"
-            className="btn btn-outline-secondary"
+            className="btn btn-primary"
             onClick={onBack}
             disabled={isLoading}
           >
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index f7130f0..4a1bd29 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -99,13 +99,13 @@ html {
 
 body {
   font-family: "Open Sans", sans-serif;
-  color: var(--text-main);
+  color: var(--text-main) !important;
   background-color: transparent !important;
 }
 
 main {
-  color: var(--text-main);
-  background-color: var(--background-main);
+  color: var(--text-main) !important;
+  background-color: var(--background-main) !important;
 }
 
 /* Tipografía global */
@@ -116,8 +116,8 @@ p,
 span,
 a,
 button {
-  font-family: "Open Sans", sans-serif;
-  color: var(--text-main);
+  font-family: "Open Sans", sans-serif !important;
+  color: var(--text-main) !important;
 }
 
 h1,
@@ -126,6 +126,255 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Product Sans", sans-serif;
-  color: var(--text-main);
+  font-family: "Product Sans", sans-serif !important;
+  color: var(--text-main) !important;
+}
+
+/* ================================
+   THEME STYLES
+================================== */
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at top, rgba(53, 158, 188, 0.2), transparent 55%), var(--background-main) !important;
+  color: var(--text-main) !important;
+}
+
+.app-card {
+  background: var(--background-card) !important;
+  color: var(--text-main) !important;
+  border: 1px solid var(--border-color) !important;
+  box-shadow: var(--shadow-lg) !important;
+}
+
+.app-card-body {
+  background: linear-gradient(180deg, rgba(14, 16, 28, 0.2), transparent 65%) !important;
+}
+
+.panel-surface {
+  background: var(--background-alt) !important;
+  border: 1px solid var(--border-color) !important;
+  color: var(--text-main) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.nav-pills .nav-link {
+  color: var(--text-muted) !important;
+  background: transparent !important;
+  border: 1px solid transparent !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+.nav-pills .nav-link:hover {
+  color: var(--text-accent) !important;
+  border-color: var(--border-hover) !important;
+}
+
+.nav-pills .nav-link.active {
+  color: var(--text-main) !important;
+  background: linear-gradient(135deg, var(--bondi-blue), var(--bondi-blue-dark)) !important;
+  border-color: transparent !important;
+  box-shadow: var(--shadow-accent) !important;
+}
+
+.form-control {
+  background: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
+  color: var(--input-text) !important;
+}
+
+.form-control::placeholder {
+  color: var(--input-placeholder) !important;
+}
+
+.form-control:focus {
+  background: var(--input-bg) !important;
+  color: var(--input-text) !important;
+  border-color: var(--input-border-focus) !important;
+  box-shadow: 0 0 0 0.25rem rgba(53, 158, 188, 0.25) !important;
+}
+
+.form-text {
+  color: var(--text-muted) !important;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--button-bg), var(--bondi-blue-dark)) !important;
+  border-color: var(--button-bg) !important;
+  color: var(--button-text) !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  background: linear-gradient(135deg, var(--button-bg-hover), var(--bondi-blue-darker)) !important;
+  border-color: var(--button-bg-hover) !important;
+}
+
+.btn-outline-primary {
+  color: var(--button-bg) !important;
+  border-color: var(--button-bg) !important;
+  background: transparent !important;
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary:focus {
+  color: var(--button-text) !important;
+  background: var(--button-bg) !important;
+  border-color: var(--button-bg) !important;
+}
+
+.btn-outline-secondary {
+  color: var(--text-muted) !important;
+  border-color: var(--text-muted) !important;
+}
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus {
+  color: var(--text-inverted) !important;
+  background: var(--gun-powder-light) !important;
+  border-color: var(--gun-powder-light) !important;
+}
+
+.btn-outline-light {
+  color: var(--text-main) !important;
+  border-color: var(--text-main) !important;
+}
+
+.btn-outline-light:hover,
+.btn-outline-light:focus {
+  color: var(--text-inverted) !important;
+  background: var(--text-main) !important;
+  border-color: var(--text-main) !important;
+}
+
+.btn-success {
+  background: linear-gradient(135deg, var(--success), #2f9a87) !important;
+  border-color: var(--success) !important;
+  color: var(--text-main) !important;
+}
+
+.btn-success:hover,
+.btn-success:focus {
+  background: linear-gradient(135deg, #2f9a87, #257d6d) !important;
+  border-color: #2f9a87 !important;
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, var(--error), #c0475d) !important;
+  border-color: var(--error) !important;
+  color: var(--text-main) !important;
+}
+
+.btn-danger:hover,
+.btn-danger:focus {
+  background: linear-gradient(135deg, #c0475d, #9d3547) !important;
+  border-color: #c0475d !important;
+}
+
+.btn-link {
+  color: var(--text-link) !important;
+}
+
+.btn-link:hover,
+.btn-link:focus {
+  color: var(--text-accent) !important;
+}
+
+.btn-close {
+  filter: invert(80%);
+}
+
+.alert {
+  background: var(--background-alt) !important;
+  color: var(--text-main) !important;
+  border: 1px solid var(--border-color) !important;
+  box-shadow: var(--shadow-sm) !important;
+}
+
+.alert-info {
+  border-color: var(--info) !important;
+  background: rgba(91, 192, 218, 0.1) !important;
+  color: var(--info) !important;
+}
+
+.alert-success {
+  border-color: var(--success) !important;
+  background: rgba(76, 201, 176, 0.12) !important;
+  color: var(--success) !important;
+}
+
+.alert-warning {
+  border-color: var(--warning) !important;
+  background: rgba(243, 201, 105, 0.14) !important;
+  color: var(--warning) !important;
+}
+
+.alert-danger {
+  border-color: var(--error) !important;
+  background: rgba(232, 93, 117, 0.12) !important;
+  color: var(--error) !important;
+}
+
+.theme-table {
+  background: var(--background-alt) !important;
+  color: var(--text-main) !important;
+  border: 1px solid var(--border-color) !important;
+}
+
+.theme-table thead {
+  background: linear-gradient(135deg, var(--bondi-blue-dark), var(--bondi-blue)) !important;
+  color: var(--text-inverted) !important;
+}
+
+.theme-table tbody tr {
+  border-color: var(--border-color) !important;
+}
+
+.theme-table tbody tr:nth-child(even) {
+  background: rgba(72, 74, 98, 0.35) !important;
+}
+
+.theme-table tbody tr:hover {
+  background: rgba(91, 192, 218, 0.12) !important;
+}
+
+img.qr-frame {
+  border: 4px solid rgba(91, 192, 218, 0.35) !important;
+  border-radius: 1rem;
+  padding: 0.5rem;
+  background: var(--background-card) !important;
+  box-shadow: var(--shadow-accent) !important;
+}
+
+code {
+  display: inline-block;
+  background: rgba(28, 30, 44, 0.6) !important;
+  border: 1px solid var(--border-color) !important;
+  color: var(--text-accent) !important;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+
+pre {
+  background: rgba(28, 30, 44, 0.6) !important;
+  border: 1px solid var(--border-color) !important;
+  color: var(--text-accent) !important;
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+  white-space: pre-wrap;
+}
+
+.text-body-secondary {
+  color: var(--text-main) !important;
+}
+
+a {
+  color: var(--text-link) !important;
+}
+
+a:hover,
+a:focus {
+  color: var(--text-accent) !important;
 }
\ No newline at end of file