diff --git a/healthmanager/Menu/BuscarPacienteBtn.js b/healthmanager/Menu/BuscarPacienteBtn.js
index 05f1c71..eaf2645 100644
--- a/healthmanager/Menu/BuscarPacienteBtn.js
+++ b/healthmanager/Menu/BuscarPacienteBtn.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/healthmanager/Menu/EditarPacienteBtn.js b/healthmanager/Menu/EditarPacienteBtn.js
index b54786b..36e5c79 100644
--- a/healthmanager/Menu/EditarPacienteBtn.js
+++ b/healthmanager/Menu/EditarPacienteBtn.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/healthmanager/Menu/EmitirRecetaBtn.js b/healthmanager/Menu/EmitirRecetaBtn.js
index 83a7eb5..4a55a27 100644
--- a/healthmanager/Menu/EmitirRecetaBtn.js
+++ b/healthmanager/Menu/EmitirRecetaBtn.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/healthmanager/Menu/registrarPacienteBtn.js b/healthmanager/Menu/registrarPacienteBtn.js
index 61ec00b..d057336 100644
--- a/healthmanager/Menu/registrarPacienteBtn.js
+++ b/healthmanager/Menu/registrarPacienteBtn.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/healthmanager/src/BuscarPaciente.jsx b/healthmanager/src/BuscarPaciente.jsx
index 32551ad..86e7be3 100644
--- a/healthmanager/src/BuscarPaciente.jsx
+++ b/healthmanager/src/BuscarPaciente.jsx
@@ -1,7 +1,8 @@
+/* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-const BuscarPaciente = () => {
+function BuscarPaciente(props){
   const [busqueda, setBusqueda] = useState('');
 
   const handleBusqueda = (e) => {
@@ -28,6 +29,6 @@ const BuscarPaciente = () => {
     </div>
 
   );
-};
+}
 
 export default BuscarPaciente;
\ No newline at end of file
diff --git a/healthmanager/src/DescargaRecetas.css b/healthmanager/src/DescargaRecetas.css
index 6cd524d..02fedc8 100644
--- a/healthmanager/src/DescargaRecetas.css
+++ b/healthmanager/src/DescargaRecetas.css
@@ -12,6 +12,13 @@
 }
 #headerPublicaciones{
     margin-left: 50px;
+    font-family: Arial, Helvetica, sans-serif;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
 }
 #divPublicaciones{
     display: flex;
@@ -28,8 +35,9 @@
     margin-right: 100px;
     padding: auto;
 }
-#division{
+#division2{
     margin-top: 20px;
+    height: 2px;
 }
 #botonEliminar{
     margin: 0 auto;
@@ -39,9 +47,18 @@
 
 }
 #divLista2{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-weight: bolder;
+    background-color: aliceblue;
     width: 600px;
     display: grid;
     margin: 0 auto;
+    margin-top: 20px;
+    padding: 20px;
+}
+#btnDescargar{
+    margin-left: 480px;
+    background-color: black;
 }
 #divBotonesRecetas{
     display: flex;
diff --git a/healthmanager/src/DescargaRecetas.jsx b/healthmanager/src/DescargaRecetas.jsx
index 7e900c0..d3c331b 100644
--- a/healthmanager/src/DescargaRecetas.jsx
+++ b/healthmanager/src/DescargaRecetas.jsx
@@ -76,7 +76,7 @@ function DescargaRecetas(props) {
     return (
         <>
             <h1 id="headerFacultad">Health Manager - Mis recetas</h1>
-            <Divider />
+            <div id="division" />
             <nav id="divPublicaciones">
                 <h1 id="headerPublicaciones">Mis publicaciones</h1>
                 <div id="divBotonesRecetas">
@@ -88,10 +88,10 @@ function DescargaRecetas(props) {
                 </Box>
                 </div>
             </nav>
-            <Divider />
+            <div id="division" />
             <div id="divLeyenda">
                 <p id="leyendaPublicacion">Visualiza tus recetas.</p>
-                <Divider />
+                <div id="division" />
             </div>
             <div id="listaEliminar">
             <div id="divLista2">
@@ -99,12 +99,12 @@ function DescargaRecetas(props) {
                             <div id="divsPublicaciones2" key={elemento.idRec}>
                         <div className='informacionPublicacion'>
                                     <p id="parrafoNum">Receta No. ({elemento.idRec})</p>
-                                    <Divider id="division" color="primary"/>
-                                    <p id="parrafoMed">{elemento.nombreMed}</p>
-                                    <p id="parrafoCon">{elemento.contactoMed}</p>
-                                    <p id="parrafoFecha"className='parrafoFecha'>{elemento.fecha}</p>
+                                    <Divider id="division2" color="gray"/>
+                                    <p id="parrafoMed">Medico emisor: {elemento.nombreMed}</p>
+                                    <p id="parrafoCon">Contacto del medico: {elemento.contactoMed}</p>
+                                    <p id="parrafoFecha"className='parrafoFecha'>Fecha de emision: {elemento.fecha}</p>
                                     <Button id="btnDescargar" variant="contained" type="submit" color="warning" onClick={()=>generarPdf(elemento.idRec,elemento.nombreMed,elemento.contactoMed,elemento.fecha)}>Descargar</Button>
-                                    <Divider id="division" color="primary"/>
+                                    <Divider id="division2" color="gray"/>
                         </div>
                         </div>
                 ))}
diff --git a/healthmanager/src/EditarPaciente.jsx b/healthmanager/src/EditarPaciente.jsx
index 519adef..a35fd72 100644
--- a/healthmanager/src/EditarPaciente.jsx
+++ b/healthmanager/src/EditarPaciente.jsx
@@ -1,8 +1,9 @@
+/* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
 import './EditarPaciente.css';
 import { Link } from 'react-router-dom';
 
-const EditarPaciente = () => {
+function EditarPaciente(props) {
   const [nombre, setNombre] = useState('');
   const [edad, setEdad] = useState('');
   const [peso, setPeso] = useState('');
@@ -50,6 +51,6 @@ const EditarPaciente = () => {
         </Link>
     </div>
   );
-};
+}
 
 export default EditarPaciente;
\ No newline at end of file
diff --git a/healthmanager/src/HistorialPacientes.jsx b/healthmanager/src/HistorialPacientes.jsx
index 5e8a436..019c719 100644
--- a/healthmanager/src/HistorialPacientes.jsx
+++ b/healthmanager/src/HistorialPacientes.jsx
@@ -1,8 +1,10 @@
+/* eslint-disable no-unused-vars */
+// eslint-disable-next-line no-unused-vars
 import React, { useState, useEffect } from 'react';
-import './HistorialPacientes.css';
+//import './HistorialPacientes.css';
 import { Link } from 'react-router-dom';
 
-const HistorialPacientes = () => {
+function HistorialPacientes(props) {
     const [pacientes, setPatientes] = useState([]);
     const [selecPaciente, setSelecPaciente] = useState(null);
     const [preinscripcion, setPreinscripcion] = useState([]);
@@ -89,6 +91,6 @@ const HistorialPacientes = () => {
         </Link>
       </div>
     );
-  };
+  }
   
 export default HistorialPacientes;
\ No newline at end of file
diff --git a/healthmanager/src/Login.css b/healthmanager/src/Login.css
index 9d25ff5..e8b43a8 100644
--- a/healthmanager/src/Login.css
+++ b/healthmanager/src/Login.css
@@ -1,9 +1,8 @@
-#divPrincipalLog{
+body{
     background-image: url("https://www.meditips.com/wp-content/uploads/2017/07/AdobeStock_103968342-scaled-uai-1032x688.jpeg");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
-    height:708px;
 }
 .h1login {
     padding-top: 10px;
diff --git a/healthmanager/src/Login.jsx b/healthmanager/src/Login.jsx
index 49da7a1..b17a1c6 100644
--- a/healthmanager/src/Login.jsx
+++ b/healthmanager/src/Login.jsx
@@ -36,13 +36,21 @@ function Login(props) {
             const response = await hacerPeticion()
             setCargando(false)
             if (response.data === 'Usuario Correcto') {
+                if(response.data === 'Usuario Medico'){
+                    navigate('/MedicoPrincipal');
+                    window.localStorage.setItem('Usuario',datosLogin.correo);
+                    window.localStorage.setItem('Contraseña',datosLogin.contraseña)
+                }else{
                 navigate('/Principal');
                 window.localStorage.setItem('Usuario',datosLogin.correo);
+                window.localStorage.setItem('Contraseña',datosLogin.contraseña)
+                }
             } else {
                 alert("Credenciales incorrectas, revisa tu correo o contraseña");
             }
         } catch (error) {
             console.log("error", error)
+            alert("Error de envio al servidor. Intentelo de nuevo porfavor.")
             setCargando(false)
         }
     }
diff --git a/healthmanager/src/MedicoPrincipal .jsx b/healthmanager/src/MedicoPrincipal .jsx
new file mode 100644
index 0000000..34ec409
--- /dev/null
+++ b/healthmanager/src/MedicoPrincipal .jsx	
@@ -0,0 +1,369 @@
+/* eslint-disable no-unused-vars */
+import {
+  Button,
+  Box,
+  TextField,
+  DialogContentText,
+  Divider,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import ButtonBase from "@mui/material/ButtonBase";
+import Typography from "@mui/material/Typography";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import "./MedicoPrincipal.css";
+import { useNavigate } from "react-router-dom";
+function MedicoPrincipal(props) {
+  const navigate = useNavigate();
+  const [publicacionesData, setPublicacionesData] = useState([]);
+  // eslint-disable-next-line no-unused-vars
+  const [Cargando, setCargando] = useState(false);
+  const correoUsuario = window.localStorage.getItem("Usuario");
+
+  const datosUsuario = async () => {
+    try {
+      const respuesta = await axios.get(
+        "http://localhost:4567/datosUsuario",
+        { params: { correo: correoUsuario }}
+      );
+      console.log("Entrando")
+      return respuesta.data;
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const UsuarioData = async () => {
+    try {
+      const respuesta = await datosUsuario();
+      const nombreUsuarioSesion = respuesta.nombre;
+      const edadUsuarioSesion = respuesta.edad;
+      const pesoUsuarioSesion = respuesta.peso;
+      const idUsuarioSesion = respuesta.idUsuario;
+      
+      window.localStorage.setItem("ID", nombreUsuarioSesion);
+      window.localStorage.setItem("Edad", edadUsuarioSesion);
+      window.localStorage.setItem("Peso", pesoUsuarioSesion);
+      window.localStorage.setItem("IDUsuario",idUsuarioSesion)
+
+      console.log(idUsuarioSesion)
+    } catch (error) {
+      console.log("holaa");
+      console.log(error);
+    }
+  };
+  UsuarioData();
+  
+
+  const cerrarSesion = () => {
+    navigate("/");
+  };
+
+  const misRecetas = () => {
+    navigate("/DescargaRecetas");
+  };
+
+  const miPerfil = () => {
+    navigate("/MiPerfil");
+  };
+
+
+  const usuarioSesion = window.localStorage.getItem("ID");
+
+  const image1 =
+    {
+      url: "https://media.istockphoto.com/vectors/medical-prescription-and-services-icon-flat-design-long-shadow-vector-id486995030?k=6&m=486995030&s=170667a&w=0&h=BEVyN20V5ul2u3WvHtc7D6QVXK7qrVsLnUn9A_OAmEE=",
+      title: "Receta medica",
+      width: "23%",
+    };
+
+  const image2 =
+    {
+      url: "https://cdn.icon-icons.com/icons2/2266/PNG/512/crowd_patient_patients_icon_140474.png",
+      title: "Mis pacientes",
+      width: "23%",
+    };
+
+  const image3 =
+    {
+      url: "https://roianalytics.agency/wp-content/uploads/2020/09/Perfil-de-usuario.png",
+      title: "Mi perfil",
+      width: "23%",
+    };
+
+  const image4 =
+    {
+      url: "https://icon-library.com/images/history-icon-png/history-icon-png-29.jpg",
+      title: "Historial pacientes",
+      width: "23%",
+    };
+
+    const image5 =
+    {
+      url: "https://static.vecteezy.com/system/resources/previews/007/796/592/non_2x/patient-medical-record-flat-icon-for-apps-or-websites-free-vector.jpg",
+      title: "Registrar pacientes",
+      width: "23%",
+    };
+    
+    const image6 =
+    {
+      url: "https://th.bing.com/th/id/OIP.pqAA7eV8PNeB7yDAMewlawHaHa?rs=1&pid=ImgDetMain",
+      title: "Editar pacientes",
+      width: "23%",
+    };
+
+    const image7 =
+    {
+      url: "https://th.bing.com/th/id/OIP.euKNS7ep6s3C7PD9QXum7AHaHa?rs=1&pid=ImgDetMain",
+      title: "Eliminar pacientes",
+      width: "23%",
+    };
+
+    const image8 =
+    {
+      url: "https://image.freepik.com/vector-gratis/hombre-saliendo-puerta_1133-32.jpg",
+      title: "Cerrar sesion",
+      width: "23%",
+    };
+
+  const ImageButton = styled(ButtonBase)(({ theme }) => ({
+    position: "relative",
+    height: 300,
+    [theme.breakpoints.down("sm")]: {
+      width: "100% !important", // Overrides inline-style
+      height: 20,
+    },
+    "&:hover, &.Mui-focusVisible": {
+      zIndex: 1,
+      "& .MuiImageBackdrop-root": {
+        opacity: 0.15,
+      },
+      "& .MuiImageMarked-root": {
+        opacity: 0,
+      },
+      "& .MuiTypography-root": {
+        border: "4px solid currentColor",
+      },
+    },
+  }));
+
+  const ImageSrc = styled("span")({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center 40%",
+  });
+
+  const Image = styled("span")(({ theme }) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: theme.palette.common.white,
+  }));
+
+  const ImageBackdrop = styled("span")(({ theme }) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.palette.common.black,
+    opacity: 0.4,
+    transition: theme.transitions.create("opacity"),
+  }));
+
+  const ImageMarked = styled("span")(({ theme }) => ({
+    height: 3,
+    width: 18,
+    backgroundColor: theme.palette.common.white,
+    position: "absolute",
+    bottom: -2,
+    left: "calc(50% - 9px)",
+    transition: theme.transitions.create("opacity"),
+  }));
+
+  return (
+    <>
+      <div id="divPrincipal">
+        <h1 id="headerSistema">Health Manager - Menu Principal</h1>
+        <div id="division" />
+        <div id="divPublicaciones">
+          <h1 id="bienvenidoUsuario">¡Hola Medico {usuarioSesion}! </h1>
+        </div>
+        <div id="division" />
+        <div id="divBotones">
+          <ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={misRecetas}>
+          <ImageSrc style={{ backgroundImage: `url(${image1.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image1.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+          <ImageButton  id="img2" focusRipple key={image2.title} style={{width:image2.width,}} onClick={miPerfil}>
+          <ImageSrc style={{ backgroundImage: `url(${image2.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image2.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+          <ImageButton id="img3" focusRipple key={image3.title} style={{width:image3.width,}} onClick={cerrarSesion}>
+          <ImageSrc style={{ backgroundImage: `url(${image3.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image3.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+          <ImageButton id="img4" focusRipple key={image4.title} style={{width:image4.width,}} onClick={misRecetas}>
+          <ImageSrc style={{ backgroundImage: `url(${image4.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image4.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+          <ImageButton id="img5" focusRipple key={image5.title} style={{width:image5.width,}} onClick={misRecetas}>
+          <ImageSrc style={{ backgroundImage: `url(${image5.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image5.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+          <ImageButton id="img6" focusRipple key={image6.title} style={{width:image6.width,}} onClick={misRecetas}>
+          <ImageSrc style={{ backgroundImage: `url(${image6.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image6.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+          <ImageButton id="img7" focusRipple key={image7.title} style={{width:image7.width,}} onClick={misRecetas}>
+          <ImageSrc style={{ backgroundImage: `url(${image7.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image7.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+          <ImageButton id="img" focusRipple key={image8.title} style={{width:image8.width,}} onClick={misRecetas}>
+          <ImageSrc style={{ backgroundImage: `url(${image8.url})` }} />
+                <ImageBackdrop className="MuiImageBackdrop-root" />
+                <Image>
+                  <Typography
+                    component="span"
+                    variant="subtitle1"
+                    color="inherit"
+                    sx={{
+                      position: "relative",
+                      p: 4,
+                      pt: 2,
+                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+                    }}
+                  >
+                    {image8.title}
+                    <ImageMarked className="MuiImageMarked-root" />
+                  </Typography>
+                </Image>
+          </ImageButton>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default MedicoPrincipal;
diff --git a/healthmanager/src/MedicoPrincipal.css b/healthmanager/src/MedicoPrincipal.css
new file mode 100644
index 0000000..1f30984
--- /dev/null
+++ b/healthmanager/src/MedicoPrincipal.css
@@ -0,0 +1,92 @@
+#headerSistema {
+    margin-top: 10px;
+    margin-left: 50px;
+    text-align: left;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+  }
+  #bienvenidoUsuario {
+    margin-top: 10px;
+    margin-left: 50px;
+    text-align: left;
+    font-size:larger;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+  }
+  #headerFacultad{
+    margin-left: 50px;
+    text-align: left;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  #headerPublicaciones{
+    margin-left: 120px;
+  }
+  #divPublicaciones{
+    display: flex;
+    height: max-content;
+  }
+  #divsPublicaciones{
+    width: 600px;
+    text-align:justify;
+    font-family:Georgia, 'Times New Roman', Times, serif;
+  }
+  #boxCerrar{
+    margin-left: auto;
+    margin-right: 100px;
+  }
+  #divLista{
+    width: max-content;
+    display:grid;
+    padding: 180px;
+  }
+  #headerForm {
+    font-size: small;
+  }
+  #divBotones {
+    font-family:Arial, Helvetica, sans-serif;
+    margin-top: 20px;
+    margin-left: 65px;
+  }
+  body{
+    background: rgb(0,22,36);
+    background: linear-gradient(90deg, rgba(0,22,36,0.6946428229494923) 0%, rgba(9,92,121,1) 35%, rgba(0,212,255,1) 100%);
+  }
+  #img1{
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  #img2{
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  #img3{
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  #img4{
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+  #img5{
+    margin-right: 10px;
+  }
+  #img6{
+    margin-right: 10px;
+  }
+  #img7{
+    margin-right: 10px;
+  }
+  #division{
+    width: auto;
+    height: 5px;
+    background-color: gray;
+    margin-top: 0px;
+  }
\ No newline at end of file
diff --git a/healthmanager/src/MiPerfil.css b/healthmanager/src/MiPerfil.css
index 837d6e4..7b568db 100644
--- a/healthmanager/src/MiPerfil.css
+++ b/healthmanager/src/MiPerfil.css
@@ -2,18 +2,44 @@
     margin-left: 50px;
     text-align: left;
     font-family: Arial, Helvetica, sans-serif;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
 }
 #headerMiPerfil{
     margin-left: 50px;
+    margin-bottom: 0px;
+    margin-top: 12px;
 }
 #divMiPerfil{
     display: flex;
-    padding: auto;
+    height: max-content;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+}
+#regresarMenu{
+    background-color: black;
+}
+#cerrarSesion{
+    background-color: black;
 }
 #divLista{
+    display: flex;
+    align-items: center;
+    height: max-content;
+    margin-left: 100px;
     width: 900px;
     display:grid;
     padding-top: 20px;
+    background-color: aliceblue;
 }
 #dialogUsuario{
     padding-bottom: 10px;
@@ -51,4 +77,13 @@
 #leyendaPublicacion{
     margin-right: auto;
     margin-left: 50px;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+    font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
 }
+#divider{
+    height: 2px;
+}
\ No newline at end of file
diff --git a/healthmanager/src/MiPerfil.jsx b/healthmanager/src/MiPerfil.jsx
index d6efb48..c14c4e0 100644
--- a/healthmanager/src/MiPerfil.jsx
+++ b/healthmanager/src/MiPerfil.jsx
@@ -24,10 +24,10 @@ function MiPerfil(props) {
 
     return (
         <>
-            <h1 id="headerFacultad">HealthManager - Mi Perfil</h1>
-            <Divider />
+            <h1 id="headerFacultad">HealthManager - Mi perfil</h1>
+            <div id="division" />
             <nav id="divMiPerfil">
-                <h1 id="headerMiPerfil">Mi Perfil</h1>
+                <h1 id="headerMiPerfil">Mi perfil</h1>
                 <div id="divBotonesPerfil">
                 <Box m={1}>
                 <Button id="regresarMenu" variant="contained" type="submit" color="warning" onClick={regresarPrincipal}>Regresar al Menu</Button>
@@ -37,26 +37,26 @@ function MiPerfil(props) {
                 </Box>
                 </div>
             </nav>
-            <Divider />
+            <div id="division" />
             <div id="divLeyenda">
                 <p id="leyendaPublicacion">Visualiza tu datos como Usuario, Correo y Contraseña.</p>
             </div>
             <div id="divLista">
                 <leyend id="leyendas">Nombre</leyend>
                 <DialogContentText id="dialogUsuario" variant="contained" className='contenidoText'>{window.localStorage.getItem("ID")}</DialogContentText>
-                <Divider color="primary"/>
+                <Divider id="divider" color="black"/>
                 <leyend id="leyendas">Edad</leyend>
                 <DialogContentText id="dialogEdad" variant="contained" className='contenidoText'>{window.localStorage.getItem("Edad")} años</DialogContentText>
-                <Divider color="primary"/>
+                <Divider id="divider" color="black"/>
                 <leyend id="leyendas">Peso</leyend>
                 <DialogContentText id="dialogPeso" variant="contained" className='contenidoText'>{window.localStorage.getItem("Peso")} kg</DialogContentText>
-                <Divider color="primary"/>
+                <Divider id="divider" color="black"/>
                 <leyend id="leyendas">Correo</leyend>
                 <DialogContentText id="dialogCorreo" variant="contained" className='contenidoText'>{window.localStorage.getItem("Usuario")}</DialogContentText>
-                <Divider color="primary"/>
+                <Divider id="divider" color="black"/>
                 <leyend id="leyendas">Contraseña</leyend>
                 <DialogContentText id="dialogContraseña" variant="contained" className='contenidoText'>{window.localStorage.getItem("Contraseña")}</DialogContentText>
-                <Divider color="primary"/>
+                <Divider id="divider" color="black"/>
             </div>
         </>
     )
diff --git a/healthmanager/src/Principal.css b/healthmanager/src/Principal.css
index e458c16..2017916 100644
--- a/healthmanager/src/Principal.css
+++ b/healthmanager/src/Principal.css
@@ -2,15 +2,24 @@
     margin-top: 10px;
     margin-left: 50px;
     text-align: left;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
     font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
   }
   #bienvenidoUsuario {
     margin-top: 10px;
-    margin-bottom: 10px;
     margin-left: 50px;
     text-align: left;
-    font-size: medium;
+    font-size:larger;
     font-family: Arial, Helvetica, sans-serif;
+    color: aliceblue;
+    text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
   }
   #headerFacultad{
     margin-left: 50px;
@@ -46,9 +55,19 @@
     margin-top: 80px;
     margin-left: 35px;
   }
+  body{
+    background: rgb(0,22,36);
+    background: linear-gradient(90deg, rgba(0,22,36,0.6946428229494923) 0%, rgba(9,92,121,1) 35%, rgba(0,212,255,1) 100%);
+  }
   #img1{
     margin-right: 10px;
   }
   #img2{
     margin-right: 10px;
   }
+  #division{
+    width: auto;
+    height: 5px;
+    background-color: gray;
+    margin-top: 0px;
+  }
diff --git a/healthmanager/src/Principal.jsx b/healthmanager/src/Principal.jsx
index 4b9490d..8c5878b 100644
--- a/healthmanager/src/Principal.jsx
+++ b/healthmanager/src/Principal.jsx
@@ -53,6 +53,7 @@ function Principal(props) {
     }
   };
   UsuarioData();
+  
 
   const cerrarSesion = () => {
     navigate("/");
@@ -86,7 +87,7 @@ function Principal(props) {
   const image3 =
     {
       url: "https://image.freepik.com/vector-gratis/hombre-saliendo-puerta_1133-32.jpg",
-      title: "Cerrar Sesion",
+      title: "Cerrar sesion",
       width: "32%",
     };
 
@@ -158,11 +159,11 @@ function Principal(props) {
     <>
       <div id="divPrincipal">
         <h1 id="headerSistema">Health Manager - Menu Principal</h1>
-        <Divider />
+        <div id="division" />
         <div id="divPublicaciones">
           <h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1>
         </div>
-        <Divider />
+        <div id="division" />
         <div id="divBotones">
           <ImageButton id="img1" focusRipple key={image1.title} style={{width:image1.width,}} onClick={misRecetas}>
           <ImageSrc style={{ backgroundImage: `url(${image1.url})` }} />
@@ -231,44 +232,3 @@ function Principal(props) {
 }
 
 export default Principal;
-
-/*
-<Box
-            sx={{
-              display: "flex",
-              flexWrap: "wrap",
-              minWidth: 300,
-              width: "100%",
-            }}
-          >
-            {images.map((image) => (
-              <ImageButton
-                focusRipple
-                key={image.title}
-                style={{
-                  width: image.width,
-                }}
-              >
-                <ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
-                <ImageBackdrop className="MuiImageBackdrop-root" />
-                <Image>
-                  <Typography
-                    component="span"
-                    variant="subtitle1"
-                    color="inherit"
-                    sx={{
-                      position: "relative",
-                      p: 4,
-                      pt: 2,
-                      pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
-                    }}
-                  >
-                    {image.title}
-                    <ImageMarked className="MuiImageMarked-root" />
-                  </Typography>
-                </Image>
-              </ImageButton>
-            ))}
-          </Box>
-
-*/
\ No newline at end of file
diff --git a/healthmanager/src/RecetaMedica.jsx b/healthmanager/src/RecetaMedica.jsx
index 61feafe..c9bad9b 100644
--- a/healthmanager/src/RecetaMedica.jsx
+++ b/healthmanager/src/RecetaMedica.jsx
@@ -1,8 +1,9 @@
+/* eslint-disable no-unused-vars */
 import React, { useId, useState } from 'react';
 import './RecetaMedica.css';
 import { Link } from 'react-router-dom';
 
-const RecetaMedica = () => {
+function RecetaMedica(props){
   const [idreceta, setIdReceta] = useId('');
   const [idPaciente, setIdPaciente] = useId('');
   const [idMedico, setIdMedico] = useId('');
@@ -121,6 +122,6 @@ const RecetaMedica = () => {
       </Link>
     </div>
   );
-};
+}
 
 export default RecetaMedica;
\ No newline at end of file
diff --git a/healthmanager/src/Paciente.jsx b/healthmanager/src/RegistrarPaciente.jsx
similarity index 92%
rename from healthmanager/src/Paciente.jsx
rename to healthmanager/src/RegistrarPaciente.jsx
index c8b3f00..92a040c 100644
--- a/healthmanager/src/Paciente.jsx
+++ b/healthmanager/src/RegistrarPaciente.jsx
@@ -1,8 +1,9 @@
+/* eslint-disable no-unused-vars */
 import React, { useState } from 'react';
 import './Paciente.css';
 import { Link } from 'react-router-dom';
 
-const Paciente = () => {
+function RegistrarPaciente(props){
   const [nombre, setNombre] = useState('');
   const [edad, setEdad] = useState('');
   const [peso, setPeso] = useState('');
@@ -49,6 +50,6 @@ const Paciente = () => {
         </Link>
     </div>
   );
-};
+}
 
-export default Paciente;
\ No newline at end of file
+export default RegistrarPaciente;
\ No newline at end of file
diff --git a/healthmanager/src/main.jsx b/healthmanager/src/main.jsx
index 69fca1c..0bbcbbc 100644
--- a/healthmanager/src/main.jsx
+++ b/healthmanager/src/main.jsx
@@ -5,8 +5,13 @@ import { RouterProvider, createHashRouter } from 'react-router-dom'
 import Principal from './Principal.jsx'
 import DescargaRecetas from './DescargaRecetas.jsx'
 import MiPerfil from './MiPerfil.jsx'
-//import registrarPaciente from './registrarPaciente.html'
-//import Publicaciones from './Publicaciones'
+import MedicoPrincipal from './MedicoPrincipal .jsx'
+import Paciente from './RegistrarPaciente.jsx';
+import EditarPaciente from './EditarPaciente';
+import RecetaMedica from './RecetaMedica';
+import BuscarPaciente from './BuscarPaciente';
+import HistorialPacientes from './HistorialPacientes'
+
 
   const router = createHashRouter([
     {
@@ -20,11 +25,33 @@ import MiPerfil from './MiPerfil.jsx'
     {
       path: "/Principal",
       element: <Principal/>
-    }/*,
+    },
     {
-      path: "/MiPerfil",
-      element:<MiPerfil/>
-    }*/,
+      path: "MedicoPrincipal",
+      element: <MedicoPrincipal/>
+    }
+    ,
+    {
+      path: "/Paciente",
+      element:<Paciente/>
+    },
+    {
+      path: "/EditarPaciente",
+      element:<EditarPaciente/>
+    },
+    {
+      path: "/RecetaMedica",
+      element:<RecetaMedica/>
+    }
+    ,
+    {
+      path: "/BuscarPaciente",
+      element:<BuscarPaciente/>
+    },
+    {
+      path: "/HistorialPacientes",
+      element:<HistorialPacientes/>
+    },
     {
       path: "/MiPerfil",
       element:<MiPerfil/>