diff --git a/src/App.js b/src/App.js
index cd75d50..d98d5db 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,9 @@ import PerfilProfesor from "./components/PerfilProfesor";
 import InterAdmin from './components/InterAdmin';
 import Pagina404 from './pages/Pagina404';
 import { PrivateRoutes, PublicRoutes } from './models/routes';
-import NavUsuarioPage from './components/NavUsuario';
+import NavUsuario from './components/NavUsuario';
+import InterResp from './components/InterResp';
+
 const App = () => {
   return (
     <div className="App">
@@ -27,11 +29,11 @@ const App = () => {
             <Route path={PrivateRoutes.INTERFACE} element={<InterAdmin/>} />
             <Route path={PrivateRoutes.CREARPROFESOR} element={<Directorio2/>}></Route>
             <Route path={PrivateRoutes.CREARUSUARIO} element={<CrearUsuario/>}></Route>
-
+            <Route path='/EditarUsuario' element={<NavUsuario/>} />
             <Route path='/Usuario/editar/:id' element={<MDUser/>}></Route>
             <Route path={PrivateRoutes.EDITARPROFESOR} element={<FormEditProfesorPage/>} />
             <Route path={PublicRoutes.NOTFOUND} element={<Pagina404/>} />
-            <Route path='/Test' element={<NavUsuarioPage/>}></Route>
+            <Route path='/Test' element={<Directorio/>}></Route>
             </Routes>
         <Footer />
       </Router>
diff --git a/src/components/CardProfesor.js b/src/components/CardProfesor.js
index 2b40601..ffb1230 100644
--- a/src/components/CardProfesor.js
+++ b/src/components/CardProfesor.js
@@ -55,8 +55,10 @@ const CardProfesor = ({ profesor, edificioNombre,permissions,jwt }) => {
     <div className="card m-3">
       <img src={profesor.fotografia} alt="Profesor img" className="imgProfe" />
       <div className="card-content">
+
         <h4>{profesor.nombre}</h4>
         <h6>{edificioNombre}</h6>
+
         <div className="button-group">
         {permissions ? (
             <>
diff --git a/src/components/CardUsuario.js b/src/components/CardUsuario.js
index 3270323..f621109 100644
--- a/src/components/CardUsuario.js
+++ b/src/components/CardUsuario.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import '../App.css';
 
-const CardUsuario = ({ usuario, id_tipo_usuario, permissions, jwt }) => {
+const CardUsuario = ({ usuario, permissions }) => {
   const [showDialog, setShowDialog] = useState(false);
   const [confirmText, setConfirmText] = useState('');
 
@@ -14,7 +14,7 @@ const CardUsuario = ({ usuario, id_tipo_usuario, permissions, jwt }) => {
       await fetchDelete(usuario.id_usuario);
       setShowDialog(false);
       setConfirmText('');
-      window.location.reload(); // Recargar la página después de eliminar, puedes manejar esto de manera más eficiente con React Router si estás usando enrutamiento
+      // Evita recargar la página directamente en React
     }
   };
 
@@ -25,43 +25,44 @@ const CardUsuario = ({ usuario, id_tipo_usuario, permissions, jwt }) => {
   const fetchDelete = async (id_usuario) => {
     try {
       const token = localStorage.getItem('Token');
-  
+
       if (!token) {
         console.error('No tienes el token');
         return;
       }
-  
-      const response = await fetch(`http://localhost:3000/usuario/${id_usuario}`, {
+
+      const response = await fetch(`http://localhost:3000/auth/${id_usuario}`, {
         method: 'DELETE',
         headers: {
           'Authorization': `Bearer ${token}`
         },
       });
-  
+
       if (!response.ok) {
         console.error('Error al eliminar el usuario');
         return;
       }
-  
+
       const data = await response.json();
       console.log('Éxito:', data);
+      // Aquí podrías actualizar el estado local o realizar alguna acción adicional si es necesario
     } catch (error) {
       console.error('Error:', error);
     }
-  };  
+  };
 
   return (
     <div className="card m-3">
       <div className="card-content">
         <h4>{usuario.nombre}</h4>
-        <h6>Tipo de Usuario: {id_tipo_usuario}</h6>
+        <h6>Tipo de Usuario: {usuario.id_tipo_usuario === 1 ? 'Administrador' : 'Responsable'}</h6>
         <div className="button-group">
-          {permissions ? (
+          {permissions && (
             <>
               <button className="edit-button" onClick={handleEditClick} style={{ backgroundColor: 'green' }}>Editar</button>
               <button className="delete-button" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>Borrar</button>
             </>
-          ) : null}
+          )}
         </div>
       </div>
       {showDialog && (
diff --git a/src/components/InterResp.css b/src/components/InterResp.css
new file mode 100644
index 0000000..e6fd138
--- /dev/null
+++ b/src/components/InterResp.css
@@ -0,0 +1,64 @@
+.resp-interface {
+    display: flex;
+    flex-direction: column; /* Alinear elementos en columna */
+    align-items: center; /* Centrar horizontalmente */
+    justify-content: center; /* Centrar verticalmente */
+    gap: 20px; /* Espacio entre la sección y el panel de navegación */
+    max-width: 500px; /* Ancho máximo para evitar que se extiendan demasiado */
+    margin: auto; /* Margen exterior y centrado horizontal */
+}
+
+.nav-panel {
+    margin-bottom: 20px; /* Espacio entre el panel de navegación y la sección */
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+}
+
+.resp-section {
+    text-align: center;
+    margin-bottom: 20px; /* Espacio entre cada sección principal y los botones */
+    padding: 20px; /* Espaciado interno de la sección */
+    border-radius: 10px; /* Bordes redondeados */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
+    background-color: lightslategray; /* Color de fondo de las secciones */
+    width: 100%; /* Ancho de la sección */
+}
+
+.section-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Centrar horizontalmente */
+    justify-content: center; /* Centrar verticalmente */
+    margin-bottom: 10px; /* Espacio entre el título y la imagen */
+}
+
+.section-icon {
+    width: 150px; /* Tamaño de la imagen */
+    height: 150px;
+    margin: 0 auto; /* Centrar la imagen dentro de su contenedor */
+    display: block; /* Para asegurar que los márgenes automáticos funcionen */
+    border-radius: 50%; /* Hacer que la imagen sea circular si es necesario */
+}
+
+.resp-section h2 {
+    margin-top: 0;
+}
+
+.button-group {
+    margin-top: 10px; /* Espacio entre el título y los botones */
+}
+
+.action-button {
+    margin: 0 5px; /* Espacio entre los botones */
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.action-button:hover {
+    background-color: #0056b3;
+}
diff --git a/src/components/InterResp.js b/src/components/InterResp.js
new file mode 100644
index 0000000..7ad8479
--- /dev/null
+++ b/src/components/InterResp.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import './InterResp.css'; // Importar el archivo CSS para los estilos
+
+const InterResp = () => {
+    return (
+        <div className="resp-interface">
+            <h1 className="nav-panel">Panel de navegación</h1>
+            <div className="resp-section">
+                <div className="section-header">
+                    <h2>Profesores</h2>
+                    <img src='https://png.pngtree.com/png-clipart/20190516/original/pngtree-users-vector-icon-png-image_3725294.jpg' alt="Profesores" className="section-icon" />
+                </div>
+                <div className="button-group">
+                    <button className="action-button">Crear</button>
+                    <button className="action-button">Editar</button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default InterResp;
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 36c0f6e..a6f10bf 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import '../App.css'; // Importación correcta del CSS
+import { Link } from 'react-router-dom';
 
 const LoginForm = () => {
   const [usuario, setUsuario] = useState('');
@@ -51,6 +52,7 @@ const LoginForm = () => {
 
   return (
     <div className="main-content">
+      <Link to={"/profesor/perfil/36"} >Hola mundo</Link>
       <h1 className="text-warning">Bienvenido al directorio de profesores</h1>
       <h2 className='m-3'>Inicio de sesión</h2>
       <form onSubmit={handleSubmit} className="login-form" style={{ borderRadius: '1em' }}>
diff --git a/src/components/MapeoUsuario.js b/src/components/MapeoUsuario.js
index 1813306..60e487b 100644
--- a/src/components/MapeoUsuario.js
+++ b/src/components/MapeoUsuario.js
@@ -38,7 +38,7 @@ const MapeoUsuario = ({ filters }) => {
       ...filters
     }).toString();
 
-    fetch(`http://localhost:3000/usuario/page?${query}`)
+    fetch(`http://localhost:3000/auth/?${query}`)
       .then(response => {
         if (!response.ok) {
           throw new Error('La respuesta de la red no fue correcta');
@@ -91,12 +91,9 @@ const MapeoUsuario = ({ filters }) => {
 
   return (
     <div className="main-content">
-      {usuarios.map(usuario => {
-        const tipoUsuario = usuario.id_tipo_usuario === 1 ? 'Administrador' : 'Responsable';
-        return (
-          <CardUsuario key={usuario.id_usuario} usuario={usuario} tipoUsuario={tipoUsuario} permissions={permissions} jwt={jwt} />
-        );
-      })}
+      {usuarios && usuarios.map(usuario => (
+        <CardUsuario key={usuario.id_usuario} usuario={usuario} permissions={permissions} />
+      ))}
 
       <nav aria-label="Navegación de páginas">
         <ul className="pagination justify-content-center">
diff --git a/src/components/PerfilProfesor.js b/src/components/PerfilProfesor.js
index 076c31a..cd10e9b 100644
--- a/src/components/PerfilProfesor.js
+++ b/src/components/PerfilProfesor.js
@@ -1,52 +1,70 @@
 import React, { useEffect, useState } from 'react';
 import './PerfilProfesor.css';
+import { useParams } from 'react-router-dom';
 
 const PerfilProfesor = ({ profesorId }) => {
+  const{id}=useParams()
   const [profesor, setProfesor] = useState(null);
 
   useEffect(() => {
-    fetch(`http://localhost:3000/profesor/${profesorId}`)
-      .then(response => response.json())
-      .then(data => setProfesor(data))
-      .catch(error => console.error('Error fetching profesor:', error));
+    console.log(id)
+    console.log(profesorId)
+    const fetchProfesor = async () => {
+      try {
+        const response = await fetch(`http://localhost:3000/profesor/${id}`);
+        if (!response.ok) {
+          throw new Error('Error fetching professor');
+        } console.log(response)
+        const data = await response.json();
+        setProfesor(data); // Guardar los datos del profesor en el estado local
+      } catch (error) {
+        console.error('Error fetching professor:', error);
+      }
+    };
+
+    fetchProfesor();
   }, [profesorId]);
 
   if (!profesor) {
-    return <div>Cargando datos...</div>;
+    return <div>Cargando datos del profesor...</div>;
   }
 
   return (
     <div className="perfil-profesor">
       <div className="datos-profesor">
         <div className="foto-nombre">
-          <img src='https://www.cvexpres.com/wp-content/uploads/2023/01/los-objetivos-como-profesor-1.jpg' alt={profesor.nombre} className="foto" />
+          <img src={profesor.fotografia} alt={profesor.nombre} className="foto" />
           <div className="info">
-            <h2>Juana</h2>
-            <p><strong>Ubicación:</strong> Aqui no mas</p>
-            <p><strong>Correo:</strong> Yomerengues@gmail.com</p>
-            <p><strong>Edificio:</strong> Edificio A-1</p>
-            <p><strong>Teléfono de oficina:</strong> 5599662211</p>
-            <p><strong>Extensión:</strong> 777</p>
+            <h2>{profesor.nombre}</h2>
+            <p><strong>Ubicación:</strong> {profesor.ubicacion}</p>
+            <p><strong>Correo:</strong> {profesor.correo_pcp}</p>
+            <p><strong>Edificio:</strong> {profesor.id_edificio}</p>
+            <p><strong>Teléfono de oficina:</strong> {profesor.tel_oficina}</p>
+            <p><strong>Extensión:</strong> {profesor.extension}</p>
           </div>
         </div>
       </div>
       <div className="datos-academicos">
         <h3>Datos académicos</h3>
         <ul>
-            <p><strong>Categoría:</strong> Categoria YOLO</p>
-            <p><strong>Adscripción:</strong> MAC</p>
+          <li><strong>Categoría:</strong> {profesor.id_categoria}</li>
+          <li><strong>Adscripción:</strong> {profesor.id_adscripcion}</li>
         </ul>
       </div>
       <div className="lineas-investigacion">
         <h3>Líneas de investigación</h3>
         <ul>
-          <li><strong>Investigaciones:</strong> El aguacate</li>
+          {profesor.lineasInvestigacion.map((linea, index) => (
+            <li key={index}><strong>Investigaciones:</strong> {linea.lineas_inv}</li>
+          ))}
         </ul>
       </div>
       <div className="proyectos-academicos">
         <h3>Proyectos académicos</h3>
         <ul>
-          <li><strong>Proyectos:</strong> El mal del aguacate</li>
+          {profesor.proyectosAcademicos.map((proyecto, index) => (
+            <li key={index}><strong>Proyectos:</strong> {proyecto.proyecto}</li>
+          ))}
         </ul>
       </div>
     </div>