diff --git a/index.php b/index.php
index 96dd2cb..98d4264 100644
--- a/index.php
+++ b/index.php
@@ -1,7 +1,7 @@
 <?php
 session_start();
 
-//Credenciales de admin de la api
+// Credenciales de administrador para la API
 $api_username = 'admin@comunica.presidencia.gob.cu';
 $api_password = '**4fgTK85pb';
 $api_host = 'https://comunica.presidencia.gob.cu:5443/api/change_password';
@@ -15,6 +15,7 @@ $db_pass = '**4fgTK85pbicomunica';
 // Variables para mensajes
 $success = '';
 $error = '';
+$showForm = true;
 
 // Procesar formulario cuando se envía
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
@@ -82,7 +83,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
                         'email' => $email
                     ]);
 
-                    $success = "Contraseña actualizada exitosamente";
+                    $success = "¡Contraseña actualizada exitosamente!";
+                    $showForm = false;
                 } else {
                     $error = "Error en el servidor XMPP: " . htmlspecialchars($response);
                 }
@@ -95,60 +97,238 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     }
 }
 ?>
-
 <!DOCTYPE html>
 <html lang="es">
 
 <head>
     <meta charset="UTF-8">
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <title>Cambiar Contrasenna</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cambiar Contraseña - IComunica</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+        }
+
+        .card {
+            box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+        }
+
+        .card:hover {
+            box-shadow: 0 15px 40px -15px rgba(0, 0, 0, 0.2);
+        }
+
+        .success-animation {
+            animation: successScale 0.5s ease-in-out;
+        }
+
+        @keyframes successScale {
+            0% {
+                transform: scale(0.9);
+                opacity: 0;
+            }
+
+            70% {
+                transform: scale(1.05);
+                opacity: 1;
+            }
+
+            100% {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+        }
+
+        .password-toggle {
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            color: #6b7280;
+        }
+    </style>
 </head>
 
+<body class="min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+        <!-- Logo y título -->
+        <div class="text-center mb-8">
+            <div class="flex items-center justify-center mb-4">
+                <div class="bg-blue-600 text-white p-3 rounded-full">
+                    <i class="fa-solid fa-comments text-2xl"></i>
+                </div>
+                <span class="ml-3 text-2xl font-bold text-gray-800">IComunica</span>
+            </div>
+            <h1 class="text-2xl font-bold text-gray-800">Cambiar Contraseña</h1>
+        </div>
 
-<body class="bg-gray-100 p-8">
+        <!-- Mensajes de éxito/error -->
+        <?php if ($success): ?>
+            <div class="success-animation bg-green-50 border border-green-200 rounded-lg p-6 mb-6 text-center">
+                <div class="text-green-600 mb-3">
+                    <i class="fa-solid fa-circle-check text-4xl"></i>
+                </div>
+                <h3 class="text-lg font-medium text-green-800 mb-2">¡Operación Exitosa!</h3>
+                <p class="text-green-700"><?= $success ?></p>
+                <div class="mt-4">
+                    <a href="#" class="text-blue-600 hover:underline" onclick="location.reload()">
+                        <i class="fa-solid fa-rotate-right mr-1"></i> Volver al inicio
+                    </a>
+                </div>
+            </div>
+        <?php endif; ?>
 
-    <section class="bg-gray-50 dark:bg-gray-900">
-        <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
-            <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
-                <img class="w-8 h-8 mr-2" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg" alt="logo">
-                IComunica
-            </a>
-            <div class="w-full p-6 bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md dark:bg-gray-800 dark:border-gray-700 sm:p-8">
-                <h2 class="mb-1 text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
-                    Cambiar Contraseña
-                </h2>
-                <form class="mt-4 space-y-4 lg:mt-5 md:space-y-5" action="#">
-                    <div>
-                        <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tu usuario</label>
-                        <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@icomunica.presidencia.gob.cu" required="">
+        <?php if ($error): ?>
+            <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+                <div class="flex items-center">
+                    <div class="text-red-600 mr-3">
+                        <i class="fa-solid fa-circle-exclamation"></i>
                     </div>
                     <div>
-                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contraseña</label>
-                        <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                        <h3 class="text-sm font-medium text-red-800">Error</h3>
+                        <p class="text-red-700 text-sm"><?= $error ?></p>
                     </div>
-                    <div>
-                        <label for="new-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nueva contraseña</label>
-                        <input type="new-password" name="new-password" id="new-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+                </div>
+            </div>
+        <?php endif; ?>
+
+        <!-- Formulario -->
+        <?php if ($showForm): ?>
+            <div class="card bg-white rounded-xl p-6 sm:p-8 shadow-lg">
+                <form method="POST">
+                    <!-- Campo de usuario -->
+                    <div class="mb-5">
+                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Usuario</label>
+                        <div class="relative">
+                            <input type="email" name="email" id="email" required
+                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                placeholder="usuario@icomunica.presidencia.gob.cu">
+                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                                <i class="fa-solid fa-user text-gray-400"></i>
+                            </div>
+                        </div>
                     </div>
-                    <div>
-                        <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirma la contraseña</label>
-                        <input type="confirm-password" name="confirm-password" id="confirm-password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
+
+                    <!-- Contraseña actual -->
+                    <div class="mb-5">
+                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Contraseña Actual</label>
+                        <div class="relative">
+                            <input type="password" name="password" id="password" required
+                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                placeholder="••••••••">
+                            <span class="password-toggle" onclick="togglePassword('password')">
+                                <i class="fa-solid fa-eye text-gray-400"></i>
+                            </span>
+                        </div>
                     </div>
-                    <div class="flex items-start">
+
+                    <!-- Nueva contraseña -->
+                    <div class="mb-5">
+                        <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">Nueva Contraseña</label>
+                        <div class="relative">
+                            <input type="password" name="new-password" id="new-password" required
+                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                placeholder="••••••••">
+                            <span class="password-toggle" onclick="togglePassword('new-password')">
+                                <i class="fa-solid fa-eye text-gray-400"></i>
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Confirmar contraseña -->
+                    <div class="mb-6">
+                        <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirmar Nueva Contraseña</label>
+                        <div class="relative">
+                            <input type="password" name="confirm-password" id="confirm-password" required
+                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                                placeholder="••••••••">
+                            <span class="password-toggle" onclick="togglePassword('confirm-password')">
+                                <i class="fa-solid fa-eye text-gray-400"></i>
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Términos y condiciones -->
+                    <div class="flex items-start mb-6">
                         <div class="flex items-center h-5">
-                            <input id="newsletter" aria-describedby="newsletter" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
+                            <input id="newsletter" name="newsletter" type="checkbox" required
+                                class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300">
                         </div>
                         <div class="ml-3 text-sm">
-                            <label for="newsletter" class="font-light text-gray-500 dark:text-gray-300">I acepto los <a class="font-medium text-primary-600 hover:underline dark:text-primary-500" href="#">Terminos y condicionesw</a></label>
+                            <label for="newsletter" class="font-light text-gray-600">Acepto los <a href="#" class="font-medium text-blue-600 hover:underline">Términos y condiciones</a></label>
                         </div>
                     </div>
-                    <button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Cambiar contraseña</button>
-                </form>
-            </div>
-        </div>
-    </section>
 
+                    <!-- Botón de envío -->
+                    <button type="submit" class="btn-primary w-full text-white font-medium rounded-lg py-3 px-5 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        <i class="fa-solid fa-key mr-2"></i> Cambiar contraseña
+                    </button>
+                </form>
+
+                <!-- Información de seguridad -->
+                <div class="mt-6 pt-6 border-t border-gray-200">
+                    <div class="flex items-center text-sm text-gray-600">
+                        <div class="mr-3 text-blue-600">
+                            <i class="fa-solid fa-shield"></i>
+                        </div>
+                        <p>Tu seguridad es nuestra prioridad. Todas las comunicaciones están cifradas.</p>
+                    </div>
+                </div>
+            </div>
+        <?php endif; ?>
+
+        <!-- Footer -->
+        <div class="mt-8 text-center text-sm text-gray-500">
+            <p>© 2023 IComunica - Sistema de Mensajería Instantánea</p>
+            <p class="mt-1">Presidencia de la República de Cuba</p>
+        </div>
+    </div>
+
+    <script>
+        // Función para mostrar/ocultar contraseña
+        function togglePassword(fieldId) {
+            const passwordField = document.getElementById(fieldId);
+            const icon = passwordField.nextElementSibling.querySelector('i');
+
+            if (passwordField.type === 'password') {
+                passwordField.type = 'text';
+                icon.classList.remove('fa-eye');
+                icon.classList.add('fa-eye-slash');
+            } else {
+                passwordField.type = 'password';
+                icon.classList.remove('fa-eye-slash');
+                icon.classList.add('fa-eye');
+            }
+        }
+
+        // Validar que las contraseñas coincidan
+        document.querySelector('form').addEventListener('submit', function(e) {
+            const newPassword = document.getElementById('new-password').value;
+            const confirmPassword = document.getElementById('confirm-password').value;
+
+            if (newPassword !== confirmPassword) {
+                e.preventDefault();
+                alert('Las contraseñas nuevas no coinciden. Por favor, verifique.');
+            }
+        });
+    </script>
 </body>
 
 </html>
\ No newline at end of file
