diff --git a/.vscode/settings.json b/.vscode/settings.json
index d83b5ba6c..b4cb7ea09 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,5 +3,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "workbench.editorAssociations": {   
         "*.md": "vscode.markdown.preview.editor"
+    },
+    "[javascriptreact]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d6b5fd56a..928aff12f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,9 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
         "vite": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -7118,6 +7121,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
       "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -7295,6 +7299,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -11373,6 +11378,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -12537,6 +12543,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
       "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
diff --git a/src/js/components/Card.jsx b/src/js/components/Card.jsx
new file mode 100644
index 000000000..14e90b379
--- /dev/null
+++ b/src/js/components/Card.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const Card = (props) => {
+    const { image, title, description } = props;
+    return (
+
+        <div className="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
+            <div className="card h-100">
+                <img src={image} className="img-fluid w-100 mb-3" alt={title} style={{ height: "200px", objectFit: "cover" }} />
+                <div className="card-body text-center">
+                    <h2 className="card-title">{title}</h2>
+                    <p className="card-text">{description}</p>
+                </div>  {/*este div cierra h-100*/}
+                <div className="card-footer text-center bg-light border-top-0">
+                    <a href="#" className="btn btn-primary"> Find Out More!! </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Card;
diff --git a/src/js/components/Footer.jsx b/src/js/components/Footer.jsx
new file mode 100644
index 000000000..412a6684c
--- /dev/null
+++ b/src/js/components/Footer.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Footer = () => {
+    return (
+        <div className="container-fluid bg-dark text-center p-4">
+            <p className="m-0 text-white">
+                Copyright © 2026 Jonathan Castañeda & Genesis Falcon
+            </p>
+        </div>
+
+
+    );
+};
+export default Footer;
diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
index 74bc8d768..cae1912f2 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,28 +1,66 @@
 import React from "react";
+import NavbarComponent from "./NavbarComponents";
+import Jumbotron from "./Jumbotron";
+import Card from "./Card";
+import Footer from "./Footer";
 
-//include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
 
-//create your first component
 const Home = () => {
+
+	const cardsDatos = [
+
+		{
+			id: 1,
+			image: "https://placehold.co/500x325",
+			title: "Carta Uno",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+
+		{
+			id: 2,
+			image: "https://placehold.co/500x325",
+			title: "Carta Dos",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+
+		{
+			id: 3,
+			image: "https://placehold.co/500x325",
+			title: "Carta Tres",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+
+		{
+			id: 4,
+			image: "https://placehold.co/500x325",
+			title: "Carta Cuatro",
+			description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
+		},
+	];
+
+
 	return (
 		<div className="text-center">
-            
-
-			<h1 className="text-center mt-5">Hello Rigo!</h1>
-			<p>
-				<img src={rigoImage} />
-			</p>
-			<a href="#" className="btn btn-success">
-				If you see this green button... bootstrap is working...
-			</a>
-			<p>
-				Made by{" "}
-				<a href="http://www.4geeksacademy.com">4Geeks Academy</a>, with
-				love!
-			</p>
+			<NavbarComponent />
+
+			<div className="container mt-5">
+				<Jumbotron />
+				<div className="row">
+					{cardsDatos.map((card) => (
+						<Card
+							key={card.id}
+							image={card.image}
+							title={card.title}
+							description={card.description}
+						/>
+					))}
+				</div>
+			</div>
+			<Footer />
 		</div>
+
 	);
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
+
diff --git a/src/js/components/Jumbotron.jsx b/src/js/components/Jumbotron.jsx
new file mode 100644
index 000000000..d22e8d28c
--- /dev/null
+++ b/src/js/components/Jumbotron.jsx
@@ -0,0 +1,13 @@
+function Jumbotron() {
+    return (
+        <div className="card text-bg-light bg mb-4 p-5 border-0" style={{ backgroundColor: "#dee2e675" }}>
+            <div className="card-body text-start">
+                <h1 className="card-title">A Warm Welcome!</h1>
+                <p className="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, iste porro inventore voluptatibus veniam, excepturi recusandae dolor aperiam deleniti quisquam sed labore quia? Culpa animi illo, ex distinctio amet explicabo.</p>
+                <a href="#" className="btn btn-primary btn-lg">Call to action!</a>
+            </div>
+        </div>
+    );
+}
+
+export default Jumbotron;
\ No newline at end of file
diff --git a/src/js/components/NavbarComponents.jsx b/src/js/components/NavbarComponents.jsx
new file mode 100644
index 000000000..1fc2b7832
--- /dev/null
+++ b/src/js/components/NavbarComponents.jsx
@@ -0,0 +1,38 @@
+function NavbarComponent () {
+                return (
+    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div className="container-fluid">
+        <a className="navbar-brand" href="#">Start Bootstrap</a>
+
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNav"
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+
+        <div className="collapse navbar-collapse d-flex justify-content-end" id="navbarNav">
+          <ul className="navbar-nav">
+            <li className="nav-item">
+              <a className="nav-link active" href="#">Home</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#">About</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#">Services</a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#">Contact</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+                );
+
+};
+
+export default NavbarComponent;
\ No newline at end of file