diff --git a/package-lock.json b/package-lock.json
index 0d3f01a..5ebf4f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "react-password-checklist": "^1.5.1",
         "react-router-dom": "^6.17.0",
         "react-slick": "^0.29.0",
-        "slick-carousel": "^1.8.1"
+        "slick-carousel": "^1.8.1",
+        "zxcvbn": "^4.4.2"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -4664,6 +4665,11 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   },
   "dependencies": {
@@ -7861,6 +7867,11 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   }
 }
diff --git a/package.json b/package.json
index d183eaf..5d81cac 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "react-password-checklist": "^1.5.1",
     "react-router-dom": "^6.17.0",
     "react-slick": "^0.29.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/src/components/BarraNavegacion.jsx b/src/components/BarraNavegacion.jsx
index 8eb2bad..8c016a9 100644
--- a/src/components/BarraNavegacion.jsx
+++ b/src/components/BarraNavegacion.jsx
@@ -32,61 +32,97 @@ function App() {
 
 
   return (
-    <div className="container mt-22">
-      <nav className="flex flex-col md:flex-row fixed w-full top-0 bg-turquesa py-1" style={{ zIndex: 1000 }}>
+    <div className="container mt-[88px]">
+      <nav
+        className="flex flex-col md:flex-row fixed w-full top-0 bg-turquesa py-1"
+        style={{ zIndex: 1000 }}
+      >
         <div className="flex items-center justify-between w-full md:w-auto md:pl-8 pr-8 md:pr-0">
           <Link to="/" className="flex items-center">
-            <img className="w-18 md:w-25 h-16 md:h-20 flex-wrap rounded-md" src={imagen} alt="logo" />
+            <img
+              className="w-18 md:w-25 h-16 md:h-20 flex-wrap rounded-md"
+              src={imagen}
+              alt="logo"
+            />
           </Link>
-          <img className="w-16 h-16 cursor-pointer md:hidden ml-auto" src={burgerMenu} alt="Menu hamburguesa" />
+          <img
+            className="w-16 h-16 cursor-pointer md:hidden ml-auto"
+            src={burgerMenu}
+            alt="Menu hamburguesa"
+          />
         </div>
 
         <div className="hidden md:flex flex-grow items-center justify-between ml-4 md:ml-13">
-          <div className="flex items-center">
+          <div className="flex items-center justify-end gap-8">
+            <Link
+              to="/inicio"
+              className="hover:border-b-2 border-blue-700 text-black px-2 py-2 font-bold flex items-center text-xl"
+            >
+              {" "}
+              <AiOutlineHome size={20} className="mr-1" /> Inicio{" "}
+            </Link>
+            {/* <Link to="/lentes" className="hover:border-b-2 border-blue-700 text-black px-2 py-2 font-bold flex items-center text-xl">
+               Lentes </Link> */}
+            <Link
+              to="/lentesS"
+              className="hover:border-b-2 border-blue-700 text-black px-2 py-2 font-bold flex items-center text-xl"
+            >
+              {" "}
+              Lentes{" "}
+            </Link>
+            <Link
+              to="/accesorios"
+              className="hover:border-b-2 border-blue-700 text-black px-2 py-2 font-bold flex items-center text-xl"
+            >
+              Accesorios
+            </Link>
+          </div>
+
+          {/* barra de busqueda */}
+
+          <div className="flex items-center ms-12">
             <div className="hidden md:flex items-center">
-              <input 
-              type="text" 
-              placeholder="Barra de búsqueda"
-              value={busqueda}
-              onChange={(e) => setBusqueda(e.target.value)}
-              className="rounded-md px-2 py-1" />
-              <button 
-              type="button" 
-              onClick={handleSearch}>
+              <input
+                type="text"
+                placeholder="Buscar..."
+                value={busqueda}
+                onChange={(e) => setBusqueda(e.target.value)}
+                className="rounded-md px-2 py-1"
+              />
+              <button type="button" onClick={handleSearch}>
                 <AiOutlineSearch className="text-white ml-2 bg-black w-6 h-6 rounded-md" />
               </button>
             </div>
           </div>
 
-          <div className="flex items-center justify-end gap-8">
-            <Link to="/inicio" className="hover:bg-blue-900 text-black rounded-md px-2 py-2 font-bold flex items-center"> <AiOutlineHome size={20} className="mr-1" /> Inicio </Link>
-            {/* <Link to="/lentes" className="hover:bg-blue-900 text-black rounded-md px-2 py-2 font-bold flex items-center">
-               Lentes </Link> */}
-            <Link to="/lentesS" className="hover:bg-blue-900 text-black rounded-md px-2 py-2 font-bold flex items-center"> Lentes </Link>
-            <Link to="/accesorios" className="hover:bg-blue-900 text-black rounded-md px-2 py-2 font-bold flex items-center"> Accesorios </Link>
-          </div>
-
           <div className="hidden md:flex items-center gap-4 ml-4 md:ml-32 -translate-x-16">
             <Link
-            to="/gestionarCi"
-            className="bg-aRey hover:bg-blue-900 text-black rounded-md px-3 py-1 font-bold flex text-center"> 
-            Gestionar Cita
+              to="/gestionarCi"
+              className="bg-aRey hover:bg-blue-900 text-black rounded-lg px-3 py-2 font-bold flex text-center text-xl"
+            >
+              Citas
             </Link>
             <Link
-            to="/inicioS"
-            className="bg-aRey hover:bg-blue-900 text-black rounded-md px-3 py-1 font-bold flex"> Iniciar Sesión </Link>
+              to="/inicioS"
+              className="bg-aRey hover:bg-blue-900 text-black rounded-lg px-3 py-2 font-bold flex w-40 justify-center items-center text-xl"
+            >
+              {" "}
+              Iniciar Sesión{" "}
+            </Link>
             <Link
-            to="/RegistroPage"
-            className="bg-aRey hover:bg-blue-900 text-black rounded-md px-4 py-2 font-bold flex"> Registrarse </Link>
-          <Link to="/carrito" className="relative inline-block">
-            <FaShoppingCart size={30} className="rounded-md text-gray-800" alt='carrito' />
-{/*             {cartItems.length > 0 && (
-              <span className="bg-red-500 text-white rounded-full w-5 h-5 absolute -top-1 -right-1 flex items-center justify-center">
-                {cartItems.length}
-              </span>
-            )} */}
-          </Link>
-            
+              to="/RegistroPage"
+              className="bg-aRey hover:bg-blue-900 text-black rounded-lg px-4 py-2 font-bold flex text-xl"
+            >
+              {" "}
+              Registrarse{" "}
+            </Link>
+            <Link to="/carrito" className="relative inline-block">
+              <FaShoppingCart
+                size={30}
+                className="rounded-md text-gray-800"
+                alt="carrito"
+              />
+            </Link>
           </div>
         </div>
       </nav>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 13a3345..67fe745 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,31 +1,26 @@
-import { BsFacebook } from "react-icons/bs"; 
-import  caihqr  from "../img/caihqr.png";
+import { BsFacebook } from "react-icons/bs";
+import caihqr from "../img/caihqr.png";
 import { Link } from "react-router-dom";
 import { FaCookieBite } from "react-icons/fa";
 import poli from "../img/politica.png";
 
-
-
-
-
 export default function Footer() {
   return (
     <footer className="bg-turquesa">
-    <div className="w-full max-w-screen-xl p-4 py-6 mx-auto lg:p-8">
-      <div className="md:flex md:justify-between">
-        <div className="mb-6 md:mb-0 md:flex md:items-center">
-          <a className="flex items-center mx-auto md:mx-0">
-            <img
-              src={caihqr}
-              className="h-40 mx-auto rounded-md"
-              alt="Logo caih"
-            />
-          </a>
-        </div>
-        <div className="mb-6 md:mb-0 md:flex md:items-center">
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
-          <div>
+      <div className="w-full max-w-screen-xl p-4 py-6 mx-auto lg:p-8">
+        <div className="md:flex md:justify-between">
+          <div className="mb-6 md:mb-0 md:flex md:items-center">
+            <a className="flex items-center mx-auto md:mx-0">
+              <img
+                src={caihqr}
+                className="h-40 mx-auto rounded-md"
+                alt="Logo caih"
+              />
+            </a>
+          </div>
+          <div className="mb-6 md:mb-0 md:flex md:items-center"></div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
+            <div>
               <h2 className="mb-6 text-sm font-semibold text-gray-600 uppercase">
                 síguenos
               </h2>
@@ -48,26 +43,28 @@ export default function Footer() {
               </h2>
               <ul className="font-medium text-gray-300 space-y-2">
                 <li className="mb-4 flex items-center">
-                <img className="-translate-x-2" src={poli} style={{ width: '30px', height: '30px' }} alt="Imagen politica de privacidad" />
+                  <img
+                    className="-translate-x-2"
+                    src={poli}
+                    style={{ width: "30px", height: "30px" }}
+                    alt="Imagen politica de privacidad"
+                  />
 
                   <Link
-                   to="/inicio/avisoP" 
-                   className="hover:underline -translate-x-1">
+                    to="/inicio/avisoP"
+                    className="hover:underline -translate-x-1"
+                  >
                     Politica de privacidad
                   </Link>
                 </li>
                 <li className="mb-4 flex items-center ">
-                  <FaCookieBite className="mr-2 "style={{ color: 'black' }} />
-                  <Link 
-                  to="/inicio/cookies" 
-                  className="hover:underline">
+                  <FaCookieBite className="mr-2 " style={{ color: "black" }} />
+                  <Link to="/inicio/cookies" className="hover:underline">
                     Cookies
                   </Link>
                 </li>
                 <li>
-                  <Link 
-                  to="/inicio/terminosC" 
-                  className="hover:underline">
+                  <Link to="/inicio/terminosC" className="hover:underline">
                     Terminos y condiciones
                   </Link>
                 </li>
@@ -96,10 +93,11 @@ export default function Footer() {
   );
 }
 
-
-{/* <Link
+{
+  /* <Link
 to="avisoP"
 className="text-black-600 hover:text-black mx-2 text-sm md:text-base lg:text-lg"
 >
 Aviso de privacidad
-</Link> */}
\ No newline at end of file
+</Link> */
+}
diff --git a/src/components/scroll.jsx b/src/components/scroll.jsx
index 6e8d0eb..9920b24 100644
--- a/src/components/scroll.jsx
+++ b/src/components/scroll.jsx
@@ -38,12 +38,12 @@ function ScrollButton() {
   };
 
   return (
-    <div className="fixed bottom-4 left-2 flex flex- justify-center mb-20">
+    <div className="fixed -bottom-[72px] left-2 flex flex- justify-center mb-20">
       <div className="flex flex-col items-center">
         <button
           className={`${
             showScrollTop ? "flex" : "hidden"
-          } bg-gray-700 hover:bg-gray-600 text-white rounded-full border-1 border-white translate-y-22`}
+          } bg-gray-700 hover:bg-gray-600 text-white rounded-full border-1 border-white`}
           onClick={scrollTop}
         >
           <IoIosArrowUp className="h-12 w-12 pb-1" />
@@ -51,7 +51,7 @@ function ScrollButton() {
         <button
           className={`${
             showScrollBottom ? "flex" : "hidden"
-          } bg-gray-700 hover:bg-gray-600 text-white rounded-full border-1 border-white translate-y-22`}
+          } bg-gray-700 hover:bg-gray-600 text-white rounded-full border-1 border-white`}
           onClick={scrollBottom}
         >
           <IoIosArrowDown className="h-12 w-12 pt-1" />
diff --git a/src/style/app.css b/src/style/app.css
index 622035d..e69de29 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -1,19 +0,0 @@
-/* App.css */
-  
-  /* .privacy-policy h2 {
-    color: #333;
-  }
-  
-  .privacy-policy strong {
-    font-weight: bold;
-  }
-  
-  .privacy-policy ul {
-    list-style-type: square;
-    margin-left: 20px;
-  }
-  
-  .privacy-policy p {
-    margin-bottom: 15px;
-  } */
-  
\ No newline at end of file
diff --git a/src/views/Registro.rar b/src/views/Registro.rar
index 48e227f..6f8d756 100644
Binary files a/src/views/Registro.rar and b/src/views/Registro.rar differ
diff --git a/src/views/Registro/FormularioPrueba.jsx b/src/views/Registro/FormularioPrueba.jsx
new file mode 100644
index 0000000..6a395e3
--- /dev/null
+++ b/src/views/Registro/FormularioPrueba.jsx
@@ -0,0 +1,179 @@
+import { useState } from "react";
+
+const ClientForm = () => {
+  const [formData, setFormData] = useState({
+    intClvCliente: 2,
+    vchNomCliente: "",
+    vchAPaterno: "",
+    vchAMaterno: "",
+    vchCorreo: "",
+    chrSexo: "",
+    dtFechaNacimiento: "",
+    vchTelefono: "",
+    vchPassword: "",
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await fetch("http://localhost:3000/clientes/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        console.log("Cliente guardado con éxito");
+        // Puedes redirigir al usuario o realizar alguna otra acción después de guardar exitosamente.
+      } else {
+        console.error("Error al guardar el cliente");
+      }
+    } catch (error) {
+      console.error("Error de red:", error);
+    }
+  };
+  return (
+    <div className="py-32 min-h-screen flex items-center justify-center">
+      <form
+        className="w-96 bg-blue-200 shadow-xl rounded px-8 pt-6 pb-8 mb-4"
+        onSubmit={handleSubmit}
+      >
+        <label
+          className="block text-gray-700 text-sm font-bold mb-2"
+          htmlFor="vchNomCliente"
+        >
+          Nombre Cliente:
+        </label>
+        <input
+          type="text"
+          id="vchNomCliente"
+          name="vchNomCliente"
+          value={formData.vchNomCliente}
+          onChange={handleChange}
+          required
+        />
+
+        <label
+          htmlFor="vchAPaterno"
+          className="block text-gray-700 text-sm font-bold mb-2"
+        >
+          Apellido Paterno:
+        </label>
+        <input
+          type="text"
+          id="vchAPaterno"
+          name="vchAPaterno"
+          value={formData.vchAPaterno}
+          onChange={handleChange}
+          required
+        />
+
+        <label
+          htmlFor="vchAMaterno"
+          className="block text-gray-700 text-sm font-bold mb-2"
+        >
+          Apellido Materno:
+        </label>
+        <input
+          type="text"
+          id="vchAMaterno"
+          name="vchAMaterno"
+          value={formData.vchAMaterno}
+          onChange={handleChange}
+          required
+        />
+
+        <label
+          htmlFor="vchCorreo"
+          className="block text-gray-700 text-sm font-bold mb-2"
+        >
+          Correo Electrónico:
+        </label>
+        <input
+          type="email"
+          id="vchCorreo"
+          name="vchCorreo"
+          value={formData.vchCorreo}
+          onChange={handleChange}
+          required
+        />
+
+        <label
+          htmlFor="chrSexo"
+          className="block text-gray-700 text-sm font-bold mb-2"
+        >
+          Género:
+        </label>
+        <select
+          id="chrSexo"
+          name="chrSexo"
+          value={formData.chrSexo}
+          onChange={handleChange}
+          required
+        >
+          <option value="Masculino">Masculino</option>
+          <option value="Femenino">Femenino</option>
+        </select>
+
+        <label
+          htmlFor="dtFechaNacimiento"
+          className="block text-gray-700 text-sm font-bold mb-2"
+        >
+          Fecha de Nacimiento:
+        </label>
+        <input
+          type="date"
+          id="dtFechaNacimiento"
+          name="dtFechaNacimiento"
+          value={formData.dtFechaNacimiento}
+          onChange={handleChange}
+          required
+        />
+
+        <label
+          htmlFor="vchTelefono"
+          className="block text-gray-700 text-sm font-bold mb-2"
+        >
+          Teléfono:
+        </label>
+        <input
+          type="tel"
+          id="vchTelefono"
+          name="vchTelefono"
+          value={formData.vchTelefono}
+          onChange={handleChange}
+          required
+        />
+
+        <label
+          htmlFor="vchPassword"
+          className="block text-gray-700 text-sm font-bold mb-2"
+        >
+          Contraseña:
+        </label>
+        <input
+          type="password"
+          id="vchPassword"
+          name="vchPassword"
+          value={formData.vchPassword}
+          onChange={handleChange}
+          required
+        />
+        <button type="submit">Guardar Cliente</button>
+      </form>
+    </div>
+  );
+};
+
+export default ClientForm;
diff --git a/src/views/Registro/InfoPersonal.jsx b/src/views/Registro/InfoPersonal.jsx
index f173cb9..853270b 100644
--- a/src/views/Registro/InfoPersonal.jsx
+++ b/src/views/Registro/InfoPersonal.jsx
@@ -55,18 +55,21 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
 
   return (
     <>
-      <div className="my-28 text-center">
-        <div className="container ml-auto mr-auto flex items-center justify-center">
-          <div>
+      <div className="pt-24 text-center rounded-lg shadow-md overflow-hidden">
+        <div className="container ml-auto mr-auto">
+          <div className="bg-white px-12">
             <p className="sm:text-2xl md:text-base lg:text-2xl text-cyan-950 font-bold mb-4">
               Formulario de informacion personal
             </p>
 
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="grid grid-cols-1"
+            >
               <div className="mb-4">
                 <label
                   htmlFor="nombre"
-                  className="block text-sm font-medium text-gray-800 -translate-x-32"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Nombre:
                 </label>
@@ -74,6 +77,7 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                   type="text"
                   id="nombre"
                   name="nombre"
+                  placeholder="Nombre"
                   onChange={(e) => {
                     const value = e.target.value.replace(/[0-9]/g, ""); // Eliminar números de la entrada
                     handleInfoChange({ nombre: value }); // Actualizar el estado con el valor limpio
@@ -99,11 +103,11 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                         "Solo se permiten letras de la A a la Z y espacios",
                     },
                   })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
               </div>
               {errors.nombre && (
-                <span className="text-red-500 text-sm mt-1">
+                <span className="text-red-500 text-base -mt-3 mb-2">*
                   {errors.nombre.message}
                 </span>
               )}
@@ -111,7 +115,7 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
               <div className="mb-4">
                 <label
                   htmlFor="apPaterno"
-                  className="block text-sm font-medium text-gray-800 -translate-x-24"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Apellido Paterno:
                 </label>
@@ -119,6 +123,7 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                   type="text"
                   id="apPaterno"
                   name="apPaterno"
+                  placeholder="Apellido Paterno"
                   onChange={(e) => {
                     const value = e.target.value.replace(/[0-9]/g, ""); // Eliminar números de la entrada
                     handleInfoChange({ apPaterno: value }); // Actualizar el estado con el valor limpio
@@ -136,7 +141,7 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                     },
                     minLength: {
                       value: 3,
-                      message: "El nombre debe tener al menos 3 caracteres",
+                      message: "El apellido debe tener al menos 3 caracteres",
                     },
                     pattern: {
                       value: /^[A-Za-zÀ-ÖØ-öø-ÿ\s]+$/, // Permite letras y espacios en blanco
@@ -144,11 +149,11 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                         "Solo se permiten letras de la A a la Z y espacios",
                     },
                   })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
               </div>
               {errors.apPaterno && (
-                <span className="text-red-500 text-sm mt-1">
+                <span className="text-red-500 text-base -mt-3 mb-2">*
                   {errors.apPaterno.message}
                 </span>
               )}
@@ -156,7 +161,7 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
               <div className="mb-4">
                 <label
                   htmlFor="apMaterno"
-                  className="block text-sm font-medium text-gray-800 -translate-x-24"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Apellido Materno:
                 </label>
@@ -164,6 +169,7 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                   type="text"
                   id="apMaterno"
                   name="apMaterno"
+                  placeholder="Apellido Materno"
                   onChange={(e) => {
                     const value = e.target.value.replace(/[0-9]/g, ""); // Eliminar números de la entrada
                     handleInfoChange({ apMaterno: value }); // Actualizar el estado con el valor limpio
@@ -181,7 +187,7 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                     },
                     minLength: {
                       value: 3,
-                      message: "El nombre debe tener al menos 3 caracteres",
+                      message: "El apellido debe tener al menos 3 caracteres",
                     },
                     pattern: {
                       value: /^[A-Za-zÀ-ÖØ-öø-ÿ\s]+$/, // Permite letras y espacios en blanco
@@ -189,11 +195,11 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                         "Solo se permiten letras de la A a la Z y espacios",
                     },
                   })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
               </div>
               {errors.apMaterno && (
-                <span className="text-red-500 text-sm mt-1">
+                <span className="text-red-500 text-base -mt-3 mb-2">*
                   {errors.apMaterno.message}
                 </span>
               )}
@@ -201,9 +207,9 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
               <div className="mb-4">
                 <label
                   htmlFor="fechaNacim"
-                  className="block text-sm font-medium text-gray-800 -translate-x-20"
+                  className="block text-gray-800 text-left font-bold"
                 >
-                  Fecha de nacimiento
+                  Fecha de nacimiento:
                 </label>
                 <input
                   type="date"
@@ -217,19 +223,18 @@ function InfoPersonal({ onNext, onBack, onValidationChange }) {
                   {...register("fechaNacim", {
                     required: "El campo es requerido",
                   })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
               </div>
               {errors.fechaNacim && (
-                <span className="text-red-500 text-sm mt-1">
+                <span className="text-red-500 text-base -mt-3 mb-2">*
                   {errors.fechaNacim.message}
                 </span>
               )}
-              <br />
-              
+
               <button
                 type="submit"
-                className="bg-blue-700 border border-black hover:bg-blue-600 text-white rounded-lg font-bold flex px-4 py-2 justify-center mx-auto items-center"
+                className="bg-blue-700 border border-black hover:bg-blue-600 text-white rounded-lg font-bold flex px-4 py-2 my-5 justify-center mx-auto items-center"
                 disabled={Object.keys(errors).length > 0}
               >
                 Siguiente
diff --git "a/src/views/Registro/RContrase\303\261a.jsx" "b/src/views/Registro/RContrase\303\261a.jsx"
index 0ac65b5..399bdba 100644
--- "a/src/views/Registro/RContrase\303\261a.jsx"
+++ "b/src/views/Registro/RContrase\303\261a.jsx"
@@ -3,6 +3,7 @@ import React, { useContext, useState, useEffect } from "react";
 import { RegistroContext } from "./RegistroContext";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import PasswordChecklist from "react-password-checklist";
 
 const RContraseña = ({ onNext, onBack, onValidationChange }) => {
   const { state, dispatch } = useContext(RegistroContext);
@@ -10,6 +11,10 @@ const RContraseña = ({ onNext, onBack, onValidationChange }) => {
   const [showPassword, setShowPassword] = useState(false); // Estado local para mostrar/ocultar la contraseña
   const [showConfirPass, setShowConfirPass] = useState(false);
 
+  const [password, setPassword] = useState("");
+  const [passwordConf, setPasswordConf] = useState("");
+  const [passwordChecklistValid, setPasswordChecklistValid] = useState(false); // Estado local para validar el checklist de la contraseña
+
   const handleInfoChange = (info) => {
     dispatch({ type: "UPDATE_RCONTRASEÑA", payload: info });
   };
@@ -27,61 +32,32 @@ const RContraseña = ({ onNext, onBack, onValidationChange }) => {
     // Aquí puedes manejar la lógica de envío del formulario
   };
 
-  const passwordValidation = (value) => {
-    const minLength = 8; // Mínimo 8 caracteres
-    const maxLength = 16; // Máximo 18 caracteres
-    const hasSpecialChar = /[!@#$%^&*]/.test(value); // Verifica si hay al menos un carácter especial
-    const hasUpperCase = /[A-Z]/.test(value); // Verifica si hay al menos una letra mayúscula
-    const hasLowerCase = /[a-z]/.test(value); // Verifica si hay al menos una letra minúscula
-    const hasNumber = /\d/.test(value); // Verifica si hay al menos un número
-
-    if (value.length < minLength) {
-      return `La contraseña debe tener al menos ${minLength} caracteres`;
-    }
-    if (value.length > maxLength) {
-      return `La contraseña no puede tener más de ${maxLength} caracteres`;
-    }
-    if (!hasSpecialChar) {
-      return "La contraseña debe contener al menos un carácter especial";
-    }
-    if (!hasUpperCase) {
-      return "La contraseña debe contener al menos una letra mayúscula";
-    }
-    if (!hasLowerCase) {
-      return "La contraseña debe contener al menos una letra minúscula";
-    }
-    if (!hasNumber) {
-      return "La contraseña debe contener al menos un número";
-    }
-
-    return true; // La contraseña es válida
-  };
-
-  const selectedQuestion = watch("question"); // Obtener el valor seleccionado de la pregunta
-
   useEffect(() => {
-    const isValid = Object.keys(errors).length === 0;
+    const isValid = Object.keys(errors).length === 0 && passwordChecklistValid; // Verificar la validez del checklist de la contraseña
     setIsValid(isValid);
     // Verificar si onValidationChange está definida antes de llamarla
     if (typeof onValidationChange === "function") {
       onValidationChange(isValid);
     }
-  }, [errors, onValidationChange]);
+  }, [errors, onValidationChange, passwordChecklistValid]);
 
   return (
     <>
-      <div className="my-28 text-center">
-        <div className="container ml-auto mr-auto flex items-center justify-center">
-          <div>
+      <div className="pt-24 text-center rounded-lg shadow-md overflow-hidden">
+        <div className="container ml-auto mr-auto">
+          <div className="bg-white px-12">
             <p className="sm:text-2xl md:text-base lg:text-2xl text-cyan-950 font-bold mb-4">
               Formulario de contraseña del contacto
             </p>
 
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="grid grid-cols-1"
+            >
               <div className="mb-4 relative">
                 <label
                   htmlFor="contraseña"
-                  className="block text-sm font-medium text-gray-800 -translate-x-28"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Contraseña:
                 </label>
@@ -89,21 +65,16 @@ const RContraseña = ({ onNext, onBack, onValidationChange }) => {
                 <input
                   type={showPassword ? "text" : "password"}
                   id="contraseña"
-                  name="contraseña"
-                  onChange={(e) =>
-                    handleInfoChange({ contraseña: e.target.value })
-                  }
+                  placeholder="Ingrese una contraseña"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
                   required
                   maxLength={16}
-                  {...register("contraseña", {
-                    validate: passwordValidation,
-                  })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
-                  placeholder="Contraseña"
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
                 <button
                   type="button"
-                  className="absolute right-20 top-1/2 transform"
+                  className="absolute right-2 top-5/8 transform"
                   onClick={() => setShowPassword(!showPassword)}
                 >
                   <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} />
@@ -118,30 +89,23 @@ const RContraseña = ({ onNext, onBack, onValidationChange }) => {
               <div className="mb-4 relative">
                 <label
                   htmlFor="confirContra"
-                  className="block text-sm font-medium text-gray-800 -translate-x-9"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Ingresa nuevamente tu contraseña:
                 </label>
                 <input
                   type={showConfirPass ? "text" : "password"}
                   id="confirContra"
-                  name="confirContra"
-                  onChange={(e) =>
-                    handleInfoChange({ confirContra: e.target.value })
-                  }
+                  placeholder="Ingresa nuevamente la contraseña"
+                  value={passwordConf}
+                  onChange={(e) => setPasswordConf(e.target.value)}
                   required
                   maxLength={16}
-                  {...register("confirContra", {
-                    validate: (value) =>
-                      value === watch("contraseña") ||
-                      "Las contraseñas no coinciden",
-                  })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
-                  placeholder="Confirma tu contraseña"
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
                 <button
                   type="button"
-                  className="absolute right-20 top-1/2 transform"
+                  className="absolute right-2 top-5/8 transform"
                   onClick={() => setShowConfirPass(!showConfirPass)}
                 >
                   <FontAwesomeIcon icon={showConfirPass ? faEyeSlash : faEye} />
@@ -153,23 +117,48 @@ const RContraseña = ({ onNext, onBack, onValidationChange }) => {
                 </span>
               )}
 
+              <PasswordChecklist
+                className="text-left"
+                rules={[
+                  "minLength",
+                  "specialChar",
+                  "number",
+                  "capital",
+                  "letter",
+                  "match",
+                ]}
+                minLength={8}
+                value={password}
+                valueAgain={passwordConf}
+                onChange={(isValid) => setPasswordChecklistValid(isValid)} // Actualizar el estado de validación del checklist
+                messages={{
+                  minLength: "La contraseña tiene más de 8 caracteres.",
+                  specialChar: "La contraseña tiene caracteres especiales.",
+                  number: "La contraseña tiene un número.",
+                  capital: "La contraseña tiene una letra mayúscula.",
+                  letter: "La contraseña tiene una letra minúsculas.",
+                  match: "Las contraseñas coinciden.",
+                }}
+              />
+              <br />
+
               {/* Pregunta secreta y respuesta */}
               <div className="mb-4">
                 <label
                   htmlFor="question"
-                  className="block text-sm font-medium text-gray-800 mb-2 -translate-x-9"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Selecciona una pregunta secreta:
                 </label>
                 <select
                   id="question"
-                  name="question"
+                  required
                   onChange={(e) =>
                     handleInfoChange({ question: e.target.value })
                   }
                   {...register("question")}
                   defaultValue=""
-                  className="border border-gray-300 py-4 rounded-lg focus:border-indigo-500 outline-none focus:right-1 focus:ring-indigo-500 w-72 select-selected text-sm "
+                  className="mt-1 p-2 border rounded-md w-full"
                 >
                   <option disabled value="">
                     Selecciona la pregunta secreta
@@ -184,51 +173,42 @@ const RContraseña = ({ onNext, onBack, onValidationChange }) => {
                   <option value="comida">¿Cuál es tu comida favorita?</option>
                 </select>
               </div>
-              {selectedQuestion !== "" && (
-                <div>
-                  <label
-                    htmlFor="answer"
-                    className="block text-sm font-medium text-gray-800 -translate-x-28"
-                  >
-                    Respuesta:
-                  </label>
-                  <input
-                    type="text"
-                    id="respuesta"
-                    name="respuesta"
-                    onChange={(e) =>
-                      handleInfoChange({ respuesta: e.target.value })
-                    }
-                    {...register("answer")}
-                    className="mt-1 p-2 border rounded-md w-72 text-center"
-                    placeholder="Ingresa tu respuesta"
-                  />
-                </div>
-              )}
-              <br />
-
-              {/* <button
-                style={{ backgroundColor: "green", color: "white" }}
-                className="bg-blue-700 border-2 border-black hover:bg-green-400 text-white rounded-md font-bold flex px-4 py-2 justify-center mx-auto items-center"
-                type="submit"
-              >
-                Guardar
-              </button> */}
+              <div>
+                <label
+                  htmlFor="answer"
+                  className="block text-gray-800 text-left font-bold"
+                >
+                  Respuesta:
+                </label>
+                <input
+                  type="text"
+                  id="respuesta"
+                  required
+                  onChange={(e) =>
+                    handleInfoChange({ respuesta: e.target.value })
+                  }
+                  {...register("answer")}
+                  className="mt-1 p-2 border rounded-md w-full"
+                  placeholder="Ingresa tu respuesta"
+                />
+              </div>
 
-              <button
-                type="button"
-                onClick={onBack}
-                className="bg-gray-500 text-white p-2 mr-2 rounded-md"
-              >
-                Regresar
-              </button>
-              <button
-                type="submit"
-                className="bg-blue-700 text-white p-2 rounded-md"
-                disabled={Object.keys(errors).length > 0}
-              >
-                Siguiente
-              </button>
+              <div className="grid grid-cols-2">
+                <button
+                  type="button"
+                  onClick={onBack}
+                  className="bg-gray-500 border border-black hover:bg-gray-400 text-white rounded-lg font-bold flex px-4 py-2 my-5 justify-center mx-auto items-center"
+                >
+                  Regresar
+                </button>
+                <button
+                  type="submit"
+                  className="bg-blue-700 border border-black hover:bg-blue-600 text-white rounded-lg font-bold flex px-4 py-2 my-5 justify-center mx-auto items-center"
+                  disabled={!isValid} // Deshabilitar el botón si no es válido
+                >
+                  Siguiente
+                </button>
+              </div>
             </form>
           </div>
         </div>
diff --git a/src/views/Registro/RCorreo.jsx b/src/views/Registro/RCorreo.jsx
index 506d5fb..ca6dc1a 100644
--- a/src/views/Registro/RCorreo.jsx
+++ b/src/views/Registro/RCorreo.jsx
@@ -37,18 +37,21 @@ const RCorreo = ({ onNext, onBack, onValidationChange }) => {
 
   return (
     <>
-      <div className="my-28 text-center">
-        <div className="container ml-auto mr-auto flex items-center justify-center">
-          <div>
+      <div className="pt-24 text-center rounded-lg shadow-md overflow-hidden">
+        <div className="container ml-auto mr-auto">
+          <div className="bg-white px-12">
             <p className="sm:text-2xl md:text-base lg:text-2xl text-cyan-950 font-bold mb-4">
               Formulario de correo electrónico del contacto
             </p>
 
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="grid grid-cols-1"
+            >
               <div className="mb-4">
                 <label
                   htmlFor="correo"
-                  className="block text-sm font-medium text-gray-800 -translate-x-20"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Correo electrónico:
                 </label>
@@ -69,20 +72,20 @@ const RCorreo = ({ onNext, onBack, onValidationChange }) => {
                       message: "El formato de correo electrónico no es válido",
                     },
                   })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                   placeholder="Correo Electrónico"
                 />
               </div>
               {errors.correo && (
-                <span className="text-red-500 text-sm mt-1">
-                  {errors.correo.message}
+                <span className="text-red-500 text-base -mt-3 mb-2">
+                  *{errors.correo.message}
                 </span>
               )}
 
               <div className="mb-4">
                 <label
                   htmlFor="telefono"
-                  className="block text-sm font-medium text-gray-800 -translate-x-20"
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Número de teléfono:
                 </label>
@@ -108,46 +111,39 @@ const RCorreo = ({ onNext, onBack, onValidationChange }) => {
                     },
                     minLength: {
                       value: 10,
-                      message:
-                        "El número de teléfono debe tener al menos 10 dígitos",
+                      message: "El teléfono debe tener al menos 10 dígitos",
                     },
                     pattern: {
                       value: /^[0-9]+$/,
                       message: "Solo se permiten números",
                     },
                   })}
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                   placeholder="Número de teléfono"
                 />
               </div>
               {errors.telefono && (
-                <span className="text-red-500 text-sm mt-1">
-                  {errors.telefono.message}
+                <span className="text-red-500 text-base -mt-3 mb-2">
+                  *{errors.telefono.message}
                 </span>
               )}
 
-              {/* <button
-                style={{ backgroundColor: "green", color: "white" }}
-                className="bg-green-700 border-2 border-black hover:bg-green-400 text-white rounded-md font-bold flex px-4 py-2 justify-center mx-auto items-center"
-                type="submit"
-              >
-                Guardar
-              </button> */}
-              <br />
-              <button
-                type="button"
-                onClick={onBack}
-                className="bg-gray-500 text-white p-2 mr-2 rounded-md"
-              >
-                Regresar
-              </button>
-              <button
-                type="submit"
-                className="bg-blue-700 text-white p-2 rounded-md"
-                disabled={Object.keys(errors).length > 0}
-              >
-                Siguiente
-              </button>
+              <div className="grid grid-cols-2">
+                <button
+                  type="button"
+                  onClick={onBack}
+                  className="bg-gray-500 border border-black hover:bg-gray-400 text-white rounded-lg font-bold flex px-4 py-2 my-5 justify-center mx-auto items-center"
+                >
+                  Regresar
+                </button>
+                <button
+                  type="submit"
+                  className="bg-blue-700 border border-black hover:bg-blue-600 text-white rounded-lg font-bold flex px-4 py-2 my-5 justify-center mx-auto items-center"
+                  disabled={Object.keys(errors).length > 0}
+                >
+                  Siguiente
+                </button>
+              </div>
             </form>
           </div>
         </div>
diff --git a/src/views/Registro/RDireccion.jsx b/src/views/Registro/RDireccion.jsx
index c7ddad0..990cfed 100644
--- a/src/views/Registro/RDireccion.jsx
+++ b/src/views/Registro/RDireccion.jsx
@@ -4,11 +4,11 @@ import { RegistroContext } from "./RegistroContext";
 
 const RDireccion = ({ onNext, onBack, onValidationChange }) => {
   const { state, dispatch } = useContext(RegistroContext);
-  const [isValid, setIsValid] = useState(false); // Estado local de validación
+  const [previousPostalCod, setPreviousPostalCod] = useState("");
+  const [locationInfo, setLocationInfo] = useState(null);
 
   const {
     register,
-    handleSubmit,
     formState: { errors },
   } = useForm();
 
@@ -16,186 +16,216 @@ const RDireccion = ({ onNext, onBack, onValidationChange }) => {
     dispatch({ type: "UPDATE_RDIRECCION", payload: info });
   };
 
-  // Definir onSubmit en el mismo ámbito que handleNextClick
-  const onSubmit = (data) => {
-    onNext();
+  const fetchLocationData = async (codPostal) => {
+    const url = `https://mexico-zip-codes3.p.rapidapi.com/${codPostal}`;
+    const options = {
+      method: "GET",
+      headers: {
+        "X-RapidAPI-Key": "ebc302487bmsh02cff3265862a58p15694ejsn32377e8b9560",
+        "X-RapidAPI-Host": "mexico-zip-codes3.p.rapidapi.com",
+      },
+    };
+
+    try {
+      const response = await fetch(url, options);
+      const result = await response.json();
+      if (result.length > 0) {
+        setLocationInfo(result);
+      }
+    } catch (error) {
+      console.error("Error fetching location data:", error);
+    }
   };
 
-  useEffect(() => {
-    const isValid = Object.keys(errors).length === 0;
-    setIsValid(isValid);
-    // Verificar si onValidationChange está definida antes de llamarla
-    if (typeof onValidationChange === "function") {
-      onValidationChange(isValid);
+  const handlePostalCodeUp = (e) => {
+    const value = e.target.value.replace(/[^\d]/g, "");
+    handleInfoChange({ CP: value });
+    if (value.length === 5 && value !== previousPostalCod) {
+      fetchLocationData(value);
+      setPreviousPostalCod(value);
     }
-  }, [errors, onValidationChange]);
+  };
+
+  useEffect(() => {
+    console.log(locationInfo);
+  }, [locationInfo]);
 
   return (
     <>
-      <div className="my-28 text-center">
-        <div className="container ml-auto mr-auto flex items-center justify-center">
-          <div>
+      <div className="pt-24 text-center rounded-lg shadow-md overflow-hidden">
+        <div className="container ml-auto mr-auto">
+          <div className="bg-white px-12">
             <p className="sm:text-2xl md:text-base lg:text-2xl text-cyan-950 font-bold mb-4">
               Formulario de direccion del contacto
             </p>
-            <form>
+            <form className="grid grid-cols-2 gap-x-8">
               <div className="mb-4">
                 <label
-                  htmlFor="codPostal"
-                  className="block text-sm font-medium text-gray-800 -translate-x-24"
+                  htmlFor=""
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Codigo Postal:
                 </label>
                 <input
                   type="text"
-                  id="codPostal"
-                  name="codPostal"
-                  onChange={(e) =>
-                    handleInfoChange({ codPostal: e.target.value })
-                  }
+                  name="CP"
+                  id="CP"
                   required
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  maxLength={5}
+                  onKeyUp={handlePostalCodeUp}
+                  onKeyDown={(e) => {
+                    if (!/\d/.test(e.key) && e.key !== "Backspace") {
+                      e.preventDefault();
+                    }
+                  }}
+                  className="mt-1 p-2 border rounded-md w-full"
                   placeholder="Codigo Postal"
+                  {...register("CP")}
                 />
               </div>
 
               <div className="mb-4">
                 <label
-                  htmlFor="ciudad"
-                  className="block text-sm font-medium text-gray-800 -translate-x-28"
+                  htmlFor=""
+                  className="block text-gray-800 text-left font-bold"
                 >
-                  Ciudad:
+                  Estado:
                 </label>
                 <input
                   type="text"
-                  id="ciudad"
-                  name="ciudad"
-                  onChange={(e) => handleInfoChange({ ciudad: e.target.value })}
+                  name="Estado"
+                  id="Estado"
                   required
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
-                  placeholder="Ciudad"
+                  disabled
+                  value={locationInfo ? locationInfo[0]?.d_estado : ""}
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
               </div>
 
               <div className="mb-4">
                 <label
-                  htmlFor="colonia"
-                  className="block text-sm font-medium text-gray-800 -translate-x-28"
+                  htmlFor=""
+                  className="block text-gray-800 text-left font-bold"
                 >
-                  Colonia:
+                  Municipio:
                 </label>
                 <input
                   type="text"
-                  id="colonia"
-                  name="colonia"
-                  onChange={(e) =>
-                    handleInfoChange({ colonia: e.target.value })
-                  }
+                  name="Municipio"
+                  id="Municipio"
                   required
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
-                  placeholder="Colonia"
+                  disabled
+                  value={locationInfo ? locationInfo[0]?.D_mnpio : ""}
+                  className="mt-1 p-2 border rounded-md w-full"
                 />
               </div>
 
               <div className="mb-4">
                 <label
-                  htmlFor="calle"
-                  className="block text-sm font-medium text-gray-800 -translate-x-28"
+                  htmlFor="Colonia"
+                  className="block text-gray-800 text-left font-bold"
+                >
+                  Colonia:
+                </label>
+                <select
+                  name="Colonia"
+                  id="Colonia"
+                  required
+                  className="mt-1 p-2 border rounded-md w-full"
+                  {...register("Colonia")}
+                >
+                  <option value="">Selecciona la colonia</option>
+                  {locationInfo &&
+                    locationInfo.map((colonia, index) => (
+                      <option key={index} value={colonia?.d_asenta}>
+                        {colonia?.d_asenta}
+                      </option>
+                    ))}
+                </select>
+              </div>
+
+              <div className="mb-4">
+                <label
+                  htmlFor=""
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Calle:
                 </label>
                 <input
                   type="text"
-                  id="calle"
-                  name="calle"
-                  onChange={(e) => handleInfoChange({ calle: e.target.value })}
+                  name="Calle"
+                  id="Calle"
                   required
-                  max="2004-12-31"
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
-                  placeholder="calle"
+                  className="mt-1 p-2 border rounded-md w-full"
+                  placeholder="Calle"
                 />
               </div>
               <div className="mb-4">
                 <label
-                  htmlFor="numExterior"
-                  className="block text-sm font-medium text-gray-800 -translate-x-20"
+                  htmlFor=""
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Numero exterior:
                 </label>
                 <input
                   type="text"
-                  id="numExterior"
-                  name="numExterior"
-                  onChange={(e) =>
-                    handleInfoChange({ numExterior: e.target.value })
-                  }
+                  name="NumExt"
+                  id="NumExt"
                   required
-                  max="2004-12-31"
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                   placeholder="Numero exterior"
                 />
               </div>
               <div className="mb-4">
                 <label
-                  htmlFor="numInterior"
-                  className="block text-sm font-medium text-gray-800 -translate-x-20"
+                  htmlFor=""
+                  className="block text-gray-800 text-left font-bold"
                 >
                   Numero interior:
                 </label>
                 <input
                   type="text"
-                  id="numInterior"
-                  name="numInterior"
-                  onChange={(e) =>
-                    handleInfoChange({ numInterior: e.target.value })
-                  }
+                  name="NumInt"
+                  id="NumInt"
                   required
-                  max="2004-12-31"
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
+                  className="mt-1 p-2 border rounded-md w-full"
                   placeholder="Numero interior"
                 />
               </div>
               <div className="mb-4">
                 <label
-                  htmlFor="estadp"
-                  className="block text-sm font-medium text-gray-800 -translate-x-28"
+                  htmlFor=""
+                  className="block text-gray-800 text-left font-bold"
                 >
-                  Estado:
+                  Referencia:
                 </label>
                 <input
                   type="text"
-                  id="estado"
-                  name="estado"
-                  onChange={(e) => handleInfoChange({ estado: e.target.value })}
+                  name="Referencia"
+                  id="Referencia"
                   required
-                  max="2004-12-31"
-                  className="mt-1 p-2 border rounded-md w-72 text-center"
-                  placeholder="Estado"
+                  className="mt-1 p-2 border rounded-md w-full"
+                  placeholder="Referencia"
                 />
               </div>
             </form>
 
-            {/* <button
-              className="bg-green-700 border-2 border-black hover:bg-green-400 text-white rounded-md font-bold flex px-4 py-2 justify-center mx-auto items-center"
-              type='submit'
-            >
-              <Link to="">Guardar</Link>
-            </button> */}
-
-            <button
-              type="button"
-              onClick={onBack}
-              className="bg-gray-500 text-white p-2 mr-2 rounded-md"
-            >
-              Regresar
-            </button>
-            <button
-              type="submit"
-              className="bg-blue-700 text-white p-2 rounded-md"
-              disabled={Object.keys(errors).length > 0}
-            >
-              Enviar
-            </button>
+            <div className="grid grid-cols-2">
+              <button
+                type="button"
+                onClick={onBack}
+                className="bg-gray-500 border border-black hover:bg-gray-400 text-white rounded-lg font-bold flex px-4 py-2 my-5 justify-center mx-auto items-center"
+              >
+                Regresar
+              </button>
+              <button
+                type="submit"
+                className="bg-blue-700 border border-black hover:bg-blue-600 text-white rounded-lg font-bold flex px-4 py-2 my-5 justify-center mx-auto items-center"
+                disabled={Object.keys(errors).length > 0}
+              >
+                Enviar
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/views/Registro/RegistroPage.jsx b/src/views/Registro/RegistroPage.jsx
index 0d7c2a9..0aef7f9 100644
--- a/src/views/Registro/RegistroPage.jsx
+++ b/src/views/Registro/RegistroPage.jsx
@@ -28,28 +28,32 @@ const RegistroPage = () => {
 
   return (
     <RegistroProvider>
-      <div className="bg-black">
-        <div className="bg-slate-200">
-          <div className="flex justify-center my-8">
-          {[1, 2, 3, 4].map((step) => (
-            <div key={step} className="flex items-center">
-              <div className={`h-10 w-10 flex justify-center items-center rounded-full border-4 ${step === currentPage ? 'border-blue-500' : 'border-gray-300'} text-lg font-semibold ${step < currentPage ? 'text-blue-500' : 'text-gray-500'} mr-4`}>{step}</div>
-              {step < 4 && <div className={`h-2 w-16 bg-${step < currentPage ? 'blue' : 'gray'}-500`} />}
+      <div className="py-10">
+        <div className="max-w-md mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
+          <div className="bg-slate-200">
+            <div className="flex justify-center -mb-20 py-3">
+              {[1, 2, 3, 4].map((step) => (
+                <div key={step} className="flex items-center">
+                  <div className={`h-10 w-10 flex justify-center items-center rounded-full border-4 ${step === currentPage ? 'border-blue-500' : 'border-gray-300'} text-lg font-semibold ${step < currentPage ? 'text-blue-500' : 'text-gray-500'}`}>{step}</div>
+                  {step < 4 && <div className={`h-2 w-16 bg-${step < currentPage ? 'blue' : 'gray'}-500`} />}
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-        {currentPage === 1 && (
-          <InfoPersonal onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
-        )}
-        {currentPage === 2 && (
-          <RCorreo onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
-        )}
-        {currentPage === 3 && (
-          <RContraseña onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
-        )}
-        {currentPage === 4 && (
-          <RDireccion onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
-        )}
+          </div>
+          <div className="">
+            {currentPage === 1 && (
+              <InfoPersonal onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
+            )}
+            {currentPage === 2 && (
+              <RCorreo onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
+            )}
+            {currentPage === 3 && (
+              <RContraseña onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
+            )}
+            {currentPage === 4 && (
+              <RDireccion onNext={handleNext} onBack={handleBack} onValidationChange={handleValidationChange} />
+            )}
+          </div>
         </div>
       </div>
       <Fot/>
diff --git a/src/views/Registro1.rar b/src/views/Registro1.rar
new file mode 100644
index 0000000..1c4015b
Binary files /dev/null and b/src/views/Registro1.rar differ
diff --git a/tailwind.config.js b/tailwind.config.js
index a07329b..6536b38 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,7 @@ export default {
       },
 
       spacing: {
-        22: "88px",
+        "5/8":"38px"
       },
 
       borderWidth: {