diff --git a/healthmanager/src/Principal.css b/healthmanager/src/Principal.css
index a346c6e..8903135 100644
--- a/healthmanager/src/Principal.css
+++ b/healthmanager/src/Principal.css
@@ -29,7 +29,6 @@ body{
     font-family:Georgia, 'Times New Roman', Times, serif;
   }
   #boxCerrar{
-    padding-top: 20px;
     margin-left: auto;
     margin-right: 100px;
   }
@@ -41,19 +40,15 @@ body{
   #headerForm {
     font-size: small;
   }
-  #divBotones{
-    display:flex;
-    justify-content: center;
-    align-items: center;
-  }
-  #botonMiPerfil,#botonMisPublicaciones,#botonNuevaPublicacion{
-    width: 300px;
-    height: 300px;
-    margin: 20px;
-  }
   #divMenu {
     font-family:Arial, Helvetica, sans-serif;
     margin-left: auto;
     margin-right: 150px;
     padding: 10px;
-  }
\ No newline at end of file
+  }
+#cerrarSesion{
+  align-items: center;
+}
+#divBotones{
+  padding-top: 30px;
+}
\ No newline at end of file
diff --git a/healthmanager/src/Principal.jsx b/healthmanager/src/Principal.jsx
index 720a5de..a22030e 100644
--- a/healthmanager/src/Principal.jsx
+++ b/healthmanager/src/Principal.jsx
@@ -1,93 +1,230 @@
 /* eslint-disable no-unused-vars */
-import { Button, Box, TextField, DialogContentText, Divider } from "@mui/material"
-import axios from "axios"
-import {useEffect,useState } from "react"
-import './Principal.css'
-import { useNavigate } from 'react-router-dom'
+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 "./Principal.css";
+import { useNavigate } from "react-router-dom";
 function Principal(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 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("https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",{params:{correo: correoUsuario}});
-            return respuesta.data;
-        } catch (error) {
-        console.log(error);
-        }
+  const datosUsuario = async () => {
+    try {
+      const respuesta = await axios.get(
+        "https://back-endproyectofinal8-production-a397.up.railway.app/datosUsuario",
+        { params: { correo: correoUsuario } }
+      );
+      return respuesta.data;
+    } catch (error) {
+      console.log(error);
     }
+  };
 
-    const UsuarioData=async()=>{
-            try {
-                const respuesta=await datosUsuario();
-                const nombreUsuarioSesion=respuesta.idUsuario;
-                const contraseñaUsuarioSesion=respuesta.contraseña;
-                window.localStorage.setItem("ID",nombreUsuarioSesion);
-                window.localStorage.setItem("Contraseña",contraseñaUsuarioSesion);
-            } catch (error) {
-                console.log("holaa");
-                console.log(error);
-            }
+  const UsuarioData = async () => {
+    try {
+      const respuesta = await datosUsuario();
+      const nombreUsuarioSesion = respuesta.idUsuario;
+      const contraseñaUsuarioSesion = respuesta.contraseña;
+      window.localStorage.setItem("ID", nombreUsuarioSesion);
+      window.localStorage.setItem("Contraseña", contraseñaUsuarioSesion);
+    } catch (error) {
+      console.log("holaa");
+      console.log(error);
     }
-    UsuarioData();
+  };
+  UsuarioData();
 
-    const cerrarSesion = () => {
-        navigate('/');
-    }
+  const cerrarSesion = () => {
+    navigate("/");
+  };
 
-    const miPerfil = () => {
-        navigate('/MiPerfil');
-    }
+  const miPerfil = () => {
+    navigate("/MiPerfil");
+  };
 
-    const publicaciones = () => {
-        navigate('/Publicaciones')
-    }
+  const publicaciones = () => {
+    navigate("/Publicaciones");
+  };
 
-    const crearPublicacion = () => {
-        navigate('/CrearPublicacion');
-    }
+  const crearPublicacion = () => {
+    navigate("/CrearPublicacion");
+  };
 
-    useEffect(() => {
-        const fetchData = async () => {
-            // eslint-disable-next-line no-useless-catch
-            try {
-                const res = await axios.get("https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones");
-                console.log("Publicaciones data: ",res.data);
-                setPublicacionesData(res.data);
-            } catch (error) {
-                throw error;
-            }
-        };
-        fetchData();
-    }, []);
+  useEffect(() => {
+    const fetchData = async () => {
+      // eslint-disable-next-line no-useless-catch
+      try {
+        const res = await axios.get(
+          "https://back-endproyectofinal8-production-a397.up.railway.app/Publicaciones"
+        );
+        console.log("Publicaciones data: ", res.data);
+        setPublicacionesData(res.data);
+      } catch (error) {
+        throw error;
+      }
+    };
+    fetchData();
+  }, []);
 
-    const usuarioSesion = window.localStorage.getItem('ID');
+  const usuarioSesion = window.localStorage.getItem("ID");
 
-    return (
+  const images = [
+    {
+      url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
+      title: "Mis recetas",
+      width: "33%",
+    },
+    {
+      url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
+      title: "Mi perfil",
+      width: "33%",
+    },
+    {
+      url: "https://th.bing.com/th/id/R.c691ed37c9ce3040c3ebd2892e88870c?rik=QUBcFflN%2b9oqPQ&pid=ImgRaw&r=0",
+      title: "Cerrar Sesion",
+      width: "33%",
+    },
+  ];
 
-        <>
-            <div>
-                <h1 id="headerFacultad">Health Manager</h1>
-                <Divider/>
-                <div id="divPublicaciones">
-                    <h1 id="headerPublicaciones">Menu Principal</h1>
-                    <h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1>
-                    <Box id="boxCerrar" m={0}>
-                        <Button id="cerrarSesion" variant="contained" type="submit" color="warning" onClick={cerrarSesion}>Cerrar sesion</Button>
-                    </Box>
-                </div>
-                <Divider/>
-                <div id="divBotones">
-                        <Button id="botonMiPerfil" variant="contained" type="button" color="primary"  disabled={Cargando} onClick={miPerfil}>Mi perfil</Button>
-                        <Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary"  disabled={Cargando} onClick={publicaciones}>Mis recetas</Button>
-                        <Button id="botonNuevaPublicacion" variant="contained" type="submit" color="primary"  disabled={Cargando} onClick={crearPublicacion}>Otros</Button>
-                </div>
-            </div>
-        </>
-    )
+  const ImageButton = styled(ButtonBase)(({ theme }) => ({
+    position: "relative",
+    height: 510,
+    [theme.breakpoints.down("sm")]: {
+      width: "100% !important", // Overrides inline-style
+      height: 100,
+    },
+    "&: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"),
+  }));
+
+  //<Button id="botonMiPerfil" variant="contained" type="button" color="primary"  disabled={Cargando} onClick={miPerfil}>Mi perfil</Button>
+  //<Button id="botonMisPublicaciones" variant="contained" type="submit" color="primary"  disabled={Cargando} onClick={publicaciones}>Mis recetas</Button>
+  //<h1 id="headerPublicaciones">Menu Principal</h1>
+  return (
+    <>
+      <div>
+        <h1 id="headerFacultad">Health Manager - Menu Principal</h1>
+        <Divider />
+        <div id="divPublicaciones">
+          <h1 id="bienvenidoUsuario">¡Hola {usuarioSesion}! </h1>
+          <Box id="boxCerrar" m={0}>
+            <Button id="cerrarSesion"
+              variant="contained"
+              type="submit"
+              color="warning"
+              onClick={cerrarSesion}>
+              Cerrar sesion
+            </Button>
+          </Box>
+        </div>
+        <Divider />
+        <div id="divBotones">
+          <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>
+        </div>
+      </div>
+    </>
+  );
 }
 
-export default Principal
\ No newline at end of file
+export default Principal;