diff --git a/src/App.css b/src/App.css
index 7b477db..bc7f4ad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,8 @@
+*{
+  margin: 0;
+  padding: 0;
+}
+
 body {
   font-family: Arial, sans-serif;
   margin: 0;
@@ -142,8 +147,7 @@ p.text-center.mt-3 {
   background: white;
   box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: row !important;
   text-align: left;
 }
 
@@ -153,3 +157,11 @@ p.text-center.mt-3 {
   justify-content: center;
   align-items: center;
 }
+
+.imgProfe {
+  width: 150px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 1em;
+  margin: 5px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index e6b7baa..adbf1a8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,7 +20,7 @@ const App = () => {
             <Route path='*' element={<Directorio/>}></Route>
             <Route path='/d2' element={<Directorio2/>}></Route>
             <Route path='/login' element={<Login/>}></Route>
-            <Route path='/CrearUsuario' element={<CrearUsuario/>}></Route>
+            <Route path='/CU' element={<CrearUsuario/>}></Route>
             </Routes>
         <Footer />
       </Router>
diff --git a/src/components/CardProfesor.js b/src/components/CardProfesor.js
index 65283e7..b8c08c7 100644
--- a/src/components/CardProfesor.js
+++ b/src/components/CardProfesor.js
@@ -1,4 +1,5 @@
 import React from "react";
+import '../App.js'
 
 const CardProfesor = ({ profesor, edificioNombre }) => {
   return (
diff --git a/src/components/CrearUsuario.js b/src/components/CrearUsuario.js
index b083326..62037c4 100644
--- a/src/components/CrearUsuario.js
+++ b/src/components/CrearUsuario.js
@@ -2,33 +2,51 @@ import React, { useState } from 'react';
 import './CrearUsuario.css';
 
 const CrearUsuario = () => {
-  const [nombreCompleto, setNombreCompleto] = useState('');
-  const [nombreUsuario, setNombreUsuario] = useState('');
+  const [nombre, setNombre] = useState('');
+  const [usuario, setUsuario] = useState('');
   const [correo, setCorreo] = useState('');
-  const [contrasena, setContrasena] = useState('');
-  const [tipoUsuario, setTipoUsuario] = useState('--Seleccionar--');
+  const [contraseña, setContraseña] = useState('');
+  const [id_tipo_usuario, setId_tipo_usuario] = useState('2');
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    // Aquí podrías implementar la lógica para registrar el usuario
-    console.log('Nombre Completo:', nombreCompleto);
-    console.log('Nombre de Usuario:', nombreUsuario);
-    console.log('Correo:', correo);
-    console.log('Contraseña:', contrasena);
-    console.log('Tipo de Usuario:', tipoUsuario);
-    // Puedes añadir más lógica para enviar los datos a una API, por ejemplo
+
+    const usuarioData = {
+      nombre,
+      usuario,
+      correo,
+      contraseña,
+      id_tipo_usuario,
+    };
+
+    fetch('http://localhost:3000/auth/register', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(usuarioData),
+    })
+    .then(response => response.json())
+    .then(data => {
+
+      console.log('Success:', data);
+      console.log(usuarioData);
+    })
+    .catch((error) => {
+      console.error('Error:', error);
+    });
   };
 
   return (
-    <div className="crear-usuario-container">
+    <div className="crear-usuario-container" style={{ backgroundColor: '#d59f0f' }}>
       <form onSubmit={handleSubmit}>
         <div className="form-group">
           <label htmlFor="nombreCompleto">Nombre completo:<span className="required">*</span></label>
           <input
             type="text"
             id="nombreCompleto"
-            value={nombreCompleto}
-            onChange={(e) => setNombreCompleto(e.target.value)}
+            value={nombre}
+            onChange={(e) => setNombre(e.target.value)}
             required
           />
         </div>
@@ -37,8 +55,8 @@ const CrearUsuario = () => {
           <input
             type="text"
             id="nombreUsuario"
-            value={nombreUsuario}
-            onChange={(e) => setNombreUsuario(e.target.value)}
+            value={usuario}
+            onChange={(e) => setUsuario(e.target.value)}
             required
           />
         </div>
@@ -57,8 +75,8 @@ const CrearUsuario = () => {
           <input
             type="password"
             id="contrasena"
-            value={contrasena}
-            onChange={(e) => setContrasena(e.target.value)}
+            value={contraseña}
+            onChange={(e) => setContraseña(e.target.value)}
             required
           />
         </div>
@@ -66,13 +84,12 @@ const CrearUsuario = () => {
           <label htmlFor="tipoUsuario">Tipo de usuario:<span className="required">*</span></label>
           <select
             id="tipoUsuario"
-            value={tipoUsuario}
-            onChange={(e) => setTipoUsuario(e.target.value)}
+            value={id_tipo_usuario}
+            onChange={(e) => setId_tipo_usuario(e.target.value)}
             required
           >
-            <option value="--Seleccionar--">--Seleccionar--</option>
-            <option value="1">1</option>
-            <option value="2">2</option>
+            <option value="1">Administrador(1)</option>
+            <option value="2">Responsable(2)</option>
           </select>
         </div>
         <button type="submit">Registrar</button>
diff --git a/src/components/Formulario.js b/src/components/Formulario.js
index b26f23c..94f9efd 100644
--- a/src/components/Formulario.js
+++ b/src/components/Formulario.js
@@ -2,20 +2,21 @@ import React, { useState, useEffect } from 'react';
 import './Formulario.css'; // Importa el archivo de estilos del formulario
 
 const Formulario = () => {
-  const [nombreCompleto, setNombreCompleto] = useState('');
-  const [numeroTrabajador, setNumeroTrabajador] = useState('');
+  const [id_usuario, setId_usuario] = useState('1');
+  const [nombre, setNombreCompleto] = useState('');
+  const [num_trabajador, setNum_trabajador] = useState('');
   const [rfc, setRfc] = useState('');
   const [homoclave, setHomoclave] = useState('');
-  const [correoPrincipal, setCorreoPrincipal] = useState('');
-  const [correoPersonal, setCorreoPersonal] = useState('');
+  const [correo_pcp, setCorreo_pcp] = useState('');
+  const [correo_per, setCorreoPersonal] = useState('');
   const [ubicacion, setUbicacion] = useState('');
-  const [telefonoOficina, setTelefonoOficina] = useState('');
+  const [tel_oficina, setTelefonoOficina] = useState('');
   const [extension, setExtension] = useState('');
-  const [telefonoPersonal, setTelefonoPersonal] = useState('');
-  const [foto, setFoto] = useState(null);
-  const [adscripcion, setAdscripcion] = useState('');
-  const [categoria, setCategoria] = useState('');
-  const [edificio, setEdificio] = useState('');
+  const [tel_personal, setTelefonoPersonal] = useState('');
+  const [fotografia, setFotografia] = useState('');
+  const [id_adscripcion, setAdscripcion] = useState('');
+  const [id_categoria, setCategoria] = useState('');
+  const [id_edificio, setEdificio] = useState('');
   const [activo, setActivo] = useState('1');
   const [adscripciones, setAdscripciones] = useState([]);
   const [categorias, setCategorias] = useState([]);
@@ -42,20 +43,22 @@ const Formulario = () => {
     e.preventDefault();
 
     const profesorData = {
-      nombreCompleto,
-      numeroTrabajador,
+      id_usuario,
+      nombre,
+      num_trabajador,
       rfc,
       homoclave,
-      correoPrincipal,
-      correoPersonal,
+      correo_pcp,
+      correo_per,
       ubicacion,
-      telefonoOficina,
+      tel_oficina,
       extension,
-      telefonoPersonal,
-      adscripcion: adscripcion === 'No asignado' ? '' : adscripcion,
-      categoria: categoria === 'No asignado' ? '' : categoria,
-      edificio: edificio === 'No asignado' ? '' : edificio,
+      tel_personal,
+      id_adscripcion,
+      id_categoria,
+      id_edificio,
       activo,
+      fotografia,
     };
 
     fetch('http://localhost:3000/profesor', {
@@ -75,19 +78,15 @@ const Formulario = () => {
     });
   };
 
-  const handleFileChange = (e) => {
-    setFoto(e.target.files[0]);
-  };
-
   return (
     <div>
       <form onSubmit={handleSubmit} className="formulario-container" style={{ backgroundColor: '#d59f0f' }}>
         <div className="form-group">
-          <label htmlFor="nombreCompleto">Nombre completo:<span className="required">*</span></label>
+          <label htmlFor="nombre">Nombre completo:<span className="required">*</span></label>
           <input
             type="text"
-            id="nombreCompleto"
-            value={nombreCompleto}
+            id="nombre"
+            value={nombre}
             onChange={(e) => setNombreCompleto(e.target.value)}
             required
           />
@@ -97,8 +96,8 @@ const Formulario = () => {
           <input
             type="text"
             id="numeroTrabajador"
-            value={numeroTrabajador}
-            onChange={(e) => setNumeroTrabajador(e.target.value)}
+            value={num_trabajador}
+            onChange={(e) => setNum_trabajador(e.target.value)}
             required
           />
         </div>
@@ -127,8 +126,8 @@ const Formulario = () => {
           <input
             type="email"
             id="correoPrincipal"
-            value={correoPrincipal}
-            onChange={(e) => setCorreoPrincipal(e.target.value)}
+            value={correo_pcp}
+            onChange={(e) => setCorreo_pcp(e.target.value)}
             required
           />
         </div>
@@ -137,7 +136,7 @@ const Formulario = () => {
           <input
             type="email"
             id="correoPersonal"
-            value={correoPersonal}
+            value={correo_per}
             onChange={(e) => setCorreoPersonal(e.target.value)}
           />
         </div>
@@ -146,7 +145,7 @@ const Formulario = () => {
           <label htmlFor="edificio">Edificio:<span className="required">*</span></label>
           <select
             id="edificio"
-            value={edificio}
+            value={id_edificio}
             onChange={(e) => setEdificio(e.target.value)}
             required
           >
@@ -161,7 +160,7 @@ const Formulario = () => {
           <label htmlFor="categoria">Categoría:<span className="required">*</span></label>
           <select
             id="categoria"
-            value={categoria}
+            value={id_categoria}
             onChange={(e) => setCategoria(e.target.value)}
             required
           >
@@ -175,7 +174,7 @@ const Formulario = () => {
           <label htmlFor="adscripcion">Adscripción:<span className="required">*</span></label>
           <select
             id="adscripcion"
-            value={adscripcion}
+            value={id_adscripcion}
             onChange={(e) => setAdscripcion(e.target.value)}
             required
           >
@@ -212,7 +211,7 @@ const Formulario = () => {
           <input
             type="tel"
             id="telefonoOficina"
-            value={telefonoOficina}
+            value={tel_oficina}
             onChange={(e) => setTelefonoOficina(e.target.value)}
             required
           />
@@ -232,16 +231,17 @@ const Formulario = () => {
           <input
             type="tel"
             id="telefonoPersonal"
-            value={telefonoPersonal}
+            value={tel_personal}
             onChange={(e) => setTelefonoPersonal(e.target.value)}
           />
         </div>
         <div className="form-group full-width">
-          <label htmlFor="foto">Foto:</label>
+          <label htmlFor="fotografia">fotografia:</label>
           <input
-            type="file"
-            id="foto"
-            onChange={handleFileChange}
+            type="text"
+            id="fotografia"
+            value={fotografia}
+            onChange={(e) => setFotografia(e.target.value)}
           />
         </div>
         <div className="form-group full-width">