diff --git a/frontend/src/AppInicio.jsx b/frontend/src/AppInicio.jsx
index 820248d..6ec8cd0 100644
--- a/frontend/src/AppInicio.jsx
+++ b/frontend/src/AppInicio.jsx
@@ -30,10 +30,20 @@ function App() {
 	navigate("/PersonalizarPastel/PastelArcoiris");
   };
 
+  const redirectToPedidos = () => {
+	navigate("/Pedidos");
+
+  };
+
+  const redirectToPasteles = () => {
+	navigate("/Pasteles");
+  };
+
   const redirectInicio = () => {
 	// Redirige a la página del hotel cuando se hace clic en el botón
 	navigate("/");
   };
+
   return (
     <>
 	<body>
@@ -71,9 +81,9 @@ function App() {
 					<i class="fa-solid fa-bars"></i>
 					<ul class="menu">
 						<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
-						<li><a href="#" >Pasteles</a></li>
+						<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
 						<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
-						<li><a href="#">Pedidos</a></li>
+						<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
 						<li><a href="#">Blog</a></li>
 
 
diff --git a/frontend/src/Pasteles.css b/frontend/src/Pasteles.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/Pasteles.jsx b/frontend/src/Pasteles.jsx
new file mode 100644
index 0000000..daeb441
--- /dev/null
+++ b/frontend/src/Pasteles.jsx
@@ -0,0 +1,205 @@
+import { useState } from 'react'
+
+import viteLogo from '/vite.svg'
+
+import { RiCustomerService2Fill } from "react-icons/ri";
+import { FaUser } from "react-icons/fa";
+import { LuShoppingBasket } from "react-icons/lu";
+import { FaMagnifyingGlass } from "react-icons/fa6";
+import { CiHeart } from "react-icons/ci";
+import { FaRegEye } from "react-icons/fa";
+import { CiShare2 } from "react-icons/ci";
+import { useNavigate } from "react-router-dom";
+
+import PastelEditado1 from "./assets/Edicion1.jpg";
+import PastelEditado2 from "./assets/Edicion2.jpg";
+import PastelEditado3 from "./assets/Edicion3.jpg";
+import PastelEditado4 from "./assets/Edicion4.jpg";
+import PastelEditado5 from "./assets/Edicion5.jpg";
+import PastelEditado6 from "./assets/Edicion6.jpg";
+import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg";
+import MejoresPasteles from "./assets/MejoresPasteles.jpg";
+import PastelTematico from "./assets/pastel-tematico.jpg";
+
+function AppPasteles() {
+    const [count, setCount] = useState(0);
+    const navigate = useNavigate();
+
+    const redirectPersonalizarPastelArcoiris = () => {
+        // Redirige a la página del hotel cuando se hace clic en el botón
+        navigate("/PersonalizarPastel/PastelArcoiris");
+      };
+    
+      const redirectToPedidos = () => {
+        navigate("/Pedidos");
+    
+      };
+    
+      const redirectToPasteles = () => {
+        navigate("/Pasteles");
+      };
+    
+      const redirectInicio = () => {
+        // Redirige a la página del hotel cuando se hace clic en el botón
+        navigate("/");
+      };
+
+    return (
+      <>
+	<body>
+		<header>
+			<div className="container-hero">
+				<div className="container hero">
+					<div className="customer-support">
+         			 <RiCustomerService2Fill className="icono-cliente" />
+						<div className="content-customer-support">
+
+							<span className="text">Soporte al cliente</span>
+							<span className="number">123-456-7890</span>
+              
+						</div>
+					</div>
+
+					<div className="container-logo">
+						<i className="fa-solid fa-mug-hot"></i>
+						<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
+					</div>
+
+					<div className="container-user">
+         		 <FaUser className="icono-User"/>
+					<LuShoppingBasket className="icono-basket"/>
+						<div className="content-shopping-cart">
+							<span className="text">Carrito</span>
+							<span className="number">(0)</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div className="container-navbar">
+				<nav className="navbar container">
+					<i className="fa-solid fa-bars"></i>
+					<ul className="menu">
+                    <li><a href="#" onClick={redirectInicio}>Inicio</a></li>
+						<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
+						<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
+						<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
+						<li><a href="#">Blog</a></li>
+
+
+					</ul>
+
+					<form className="search-form">
+						<input type="search" placeholder="Buscar..." />
+						<button className="btn-search">
+              <FaMagnifyingGlass className="icono-lupa" />
+						</button>
+					</form>
+				</nav>
+			</div>
+		</header>
+
+
+		<main className="main-content">
+			<section className="container container-features">
+
+			</section>
+
+			<section className="container top-categories">
+
+			</section>
+
+			<section className="container top-products">
+				
+
+
+				
+
+				
+			</section>
+
+			
+
+			<section className="container specials">
+				<h1 className="heading-1"></h1>
+
+				<div className="container-products">
+
+				</div>
+			</section>
+
+			<section className="container blogs">
+	
+			</section>
+
+		</main>
+
+
+		<footer className="footer">
+			<div className="container container-footer">
+				<div className="menu-footer">
+					<div className="contact-info">
+						<p className="title-footer">Información de Contacto</p>
+						<ul>
+							<li>
+								Avenida Xalapa 
+							</li>
+							<li>Teléfono: 2288520821</li>
+							<li>EmaiL: cdgn_17@hotmail.com</li>
+						</ul>
+						<div className="social-icons">
+							<span className="facebook">
+								<i className="fa-brands fa-facebook-f"></i>
+							</span>
+							<span className="twitter">
+								<i className="fa-brands fa-twitter"></i>
+							</span>
+							<span className="youtube">
+								<i className="fa-brands fa-youtube"></i>
+							</span>
+							<span className="pinterest">
+								<i className="fa-brands fa-pinterest-p"></i>
+							</span>
+							<span className="instagram">
+								<i className="fa-brands fa-instagram"></i>
+							</span>
+						</div>
+					</div>
+
+					<div className="information">
+						<p className="title-footer">Información</p>
+						<ul>
+							<li><a href="#">Acerca de Nosotros</a></li>
+							<li><a href="#">Información de Entrega</a></li>
+							<li><a href="#">Politicas de Privacidad</a></li>
+							<li><a href="#">Términos y condiciones</a></li>
+							<li><a href="#">Contactános</a></li>
+						</ul>
+					</div>
+
+					<div className="my-account">
+						<p className="title-footer">Mi cuenta</p>
+
+						<ul>
+							<li><a href="#">Mi cuenta</a></li>
+							<li><a href="#">Pedidos</a></li>
+							<li><a href="#">Boletín</a></li>
+						</ul>
+					</div>
+
+
+				</div>
+
+				<div className="copyright">
+
+
+				</div>
+			</div>
+		</footer>
+
+	    </body>
+      </>
+    )
+  }
+
+  export default AppPasteles
\ No newline at end of file
diff --git a/frontend/src/Pedidos.css b/frontend/src/Pedidos.css
new file mode 100644
index 0000000..1f65be3
--- /dev/null
+++ b/frontend/src/Pedidos.css
@@ -0,0 +1,85 @@
+
+.content-card-product h3:hover {
+	color: var(--primary-color);
+}
+
+.add-cart {
+	justify-self: start;
+	border: 2px solid var(--primary-color);
+	padding: 1rem;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: all 0.4s ease;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.add-cart:hover {
+	background-color: var(--primary-color);
+}
+
+.add-cart i {
+	font-size: 1.5rem;
+	color: var(--primary-color);
+}
+
+.add-cart:hover i {
+	color: #fff;
+}
+
+.content-card-product .price {
+	justify-self: end;
+	align-self: center;
+
+	font-size: 1.7rem;
+	font-weight: 600;
+}
+
+.content-card-product .price span {
+	font-size: 1.5rem;
+	font-weight: 400;
+	text-decoration: line-through;
+	color: #777;
+	margin-left: 0.5rem;
+}
+
+
+/* ************* ICONOS ************* */
+
+
+.icono-cliente {
+    font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
+    align-items: center;
+	text-align: left;
+	color:var(--primary-color)
+}
+
+.icono-User {
+    font-size: 4rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
+    align-items: center;
+	text-align: left;
+    color:var(--primary-color)
+
+}
+.icono-basket {
+    font-size: 4.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
+    align-items: center;
+	text-align: left;
+    color:var(--primary-color)
+}
+
+.icono-lupa{
+    font-size: 2rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
+    align-items: center;
+	text-align: left;
+    color: white;
+}
+
+.icono-basket-card{
+    font-size: 2.5rem; /* Cambia el tamaño del icono ajustando el valor de '2rem' según sea necesario */
+    align-items: center;
+	text-align: left;
+    color:var(--primary-color)
+}
\ No newline at end of file
diff --git a/frontend/src/Pedidos.jsx b/frontend/src/Pedidos.jsx
new file mode 100644
index 0000000..3d42922
--- /dev/null
+++ b/frontend/src/Pedidos.jsx
@@ -0,0 +1,204 @@
+import { useState } from 'react'
+
+import viteLogo from '/vite.svg'
+
+import { RiCustomerService2Fill } from "react-icons/ri";
+import { FaUser } from "react-icons/fa";
+import { LuShoppingBasket } from "react-icons/lu";
+import { FaMagnifyingGlass } from "react-icons/fa6";
+import { CiHeart } from "react-icons/ci";
+import { FaRegEye } from "react-icons/fa";
+import { CiShare2 } from "react-icons/ci";
+import { useNavigate } from "react-router-dom";
+
+import PastelEditado1 from "./assets/Edicion1.jpg";
+import PastelEditado2 from "./assets/Edicion2.jpg";
+import PastelEditado3 from "./assets/Edicion3.jpg";
+import PastelEditado4 from "./assets/Edicion4.jpg";
+import PastelEditado5 from "./assets/Edicion5.jpg";
+import PastelEditado6 from "./assets/Edicion6.jpg";
+import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg";
+import MejoresPasteles from "./assets/MejoresPasteles.jpg";
+import PastelTematico from "./assets/pastel-tematico.jpg";
+
+function AppPedidos() {
+    const [count, setCount] = useState(0);
+	const navigate = useNavigate();
+
+	const redirectPersonalizarPastelArcoiris = () => {
+		// Redirige a la página del hotel cuando se hace clic en el botón
+		navigate("/PersonalizarPastel/PastelArcoiris");
+	  };
+	
+	  const redirectToPedidos = () => {
+		navigate("/Pedidos");
+	
+	  };
+	
+	  const redirectToPasteles = () => {
+		navigate("/Pasteles");
+	  };
+	
+	  const redirectInicio = () => {
+		// Redirige a la página del hotel cuando se hace clic en el botón
+		navigate("/");
+	  };
+
+    return (
+      <>
+	<body>
+		<header>
+			<div className="container-hero">
+				<div className="container hero">
+					<div className="customer-support">
+         			 <RiCustomerService2Fill className="icono-cliente" />
+						<div className="content-customer-support">
+
+							<span className="text">Soporte al cliente</span>
+							<span className="number">123-456-7890</span>
+              
+						</div>
+					</div>
+
+					<div className="container-logo">
+						<i className="fa-solid fa-mug-hot"></i>
+						<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
+					</div>
+
+					<div className="container-user">
+         		 <FaUser className="icono-User"/>
+					<LuShoppingBasket className="icono-basket"/>
+						<div className="content-shopping-cart">
+							<span className="text">Carrito</span>
+							<span className="number">(0)</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div className="container-navbar">
+				<nav className="navbar container">
+					<i className="fa-solid fa-bars"></i>
+					<ul className="menu">
+					<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
+						<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
+						<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
+						<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
+						<li><a href="#">Blog</a></li>
+
+					</ul>
+
+					<form className="search-form">
+						<input type="search" placeholder="Buscar..." />
+						<button className="btn-search">
+              <FaMagnifyingGlass className="icono-lupa" />
+						</button>
+					</form>
+				</nav>
+			</div>
+		</header>
+
+
+		<main className="main-content">
+			<section className="container container-features">
+
+			</section>
+
+			<section className="container top-categories">
+
+			</section>
+
+			<section className="container top-products">
+				
+
+
+				
+
+				
+			</section>
+
+			
+
+			<section className="container specials">
+				<h1 className="heading-1"></h1>
+
+				<div className="container-products">
+
+				</div>
+			</section>
+
+			<section className="container blogs">
+	
+			</section>
+
+		</main>
+
+
+		<footer className="footer">
+			<div className="container container-footer">
+				<div className="menu-footer">
+					<div className="contact-info">
+						<p className="title-footer">Información de Contacto</p>
+						<ul>
+							<li>
+								Avenida Xalapa 
+							</li>
+							<li>Teléfono: 2288520821</li>
+							<li>EmaiL: cdgn_17@hotmail.com</li>
+						</ul>
+						<div className="social-icons">
+							<span className="facebook">
+								<i className="fa-brands fa-facebook-f"></i>
+							</span>
+							<span className="twitter">
+								<i className="fa-brands fa-twitter"></i>
+							</span>
+							<span className="youtube">
+								<i className="fa-brands fa-youtube"></i>
+							</span>
+							<span className="pinterest">
+								<i className="fa-brands fa-pinterest-p"></i>
+							</span>
+							<span className="instagram">
+								<i className="fa-brands fa-instagram"></i>
+							</span>
+						</div>
+					</div>
+
+					<div className="information">
+						<p className="title-footer">Información</p>
+						<ul>
+							<li><a href="#">Acerca de Nosotros</a></li>
+							<li><a href="#">Información de Entrega</a></li>
+							<li><a href="#">Politicas de Privacidad</a></li>
+							<li><a href="#">Términos y condiciones</a></li>
+							<li><a href="#">Contactános</a></li>
+						</ul>
+					</div>
+
+					<div className="my-account">
+						<p className="title-footer">Mi cuenta</p>
+
+						<ul>
+							<li><a href="#">Mi cuenta</a></li>
+							<li><a href="#">Pedidos</a></li>
+							<li><a href="#">Boletín</a></li>
+						</ul>
+					</div>
+
+
+				</div>
+
+				<div className="copyright">
+
+
+				</div>
+			</div>
+		</footer>
+
+	    </body>
+      </>
+    )
+  }
+
+  export default AppPedidos
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 824f679..7cc69b7 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -3,6 +3,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { createRoot } from 'react-dom/client';
 import AppInicio from './AppInicio.jsx'
 import PersPastel1 from './PersPastel1.jsx'
+import Pedidos from './Pedidos.jsx'
+import Pasteles from './Pasteles.jsx'
 
 
 createRoot(document.getElementById('root')).render(
@@ -11,7 +13,8 @@ createRoot(document.getElementById('root')).render(
       <Routes>
         <Route path = "/" element = {<AppInicio/>}/>
         <Route path = "/PersonalizarPastel/PastelArcoiris" element = {<PersPastel1/>}/>
-        
+        <Route path = "/Pedidos" element = {<Pedidos/>}/>
+        <Route path = "/Pasteles" element = {<Pasteles/>}/>
       </Routes>
     </Router>
   </React.StrictMode>,
