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/index.html b/index.html
index 62cb9bc4f..d7eb8e88a 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/4geeks.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello Rigo with Vanilla.js</title>
+    <title>Landing page with React- Johanna / Valero</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index d6b5fd56a..a87d148a9 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": {
diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx
index 74bc8d768..c84d8ddd5 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,26 +1,21 @@
 import React from "react";
 
+import Navbar from "./Navbar.jsx";
+import Jumbotron from "./Jumbotron.jsx"
+
 //include images into your bundle
-import rigoImage from "../../img/rigo-baby.jpg";
+
 
 //create your first component
 const Home = () => {
 	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>
+		<div className = "Home">
+			<div className="barra-navegacion">
+				<Navbar/>
+			</div>
+			<div className= "container-fluid">
+				<Jumbotron/>
+			</div>
 		</div>
 	);
 };
diff --git a/src/js/components/Jumbotron.jsx b/src/js/components/Jumbotron.jsx
new file mode 100644
index 000000000..d742a99f4
--- /dev/null
+++ b/src/js/components/Jumbotron.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Jumbotron = () => {
+    return(
+        <div className= "Jumbotron bg-secondary-subtle p-5 m-3">
+            <h1>A Warm Welcome</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos deleniti doloremque, ipsam voluptatum perspiciatis assumenda debitis consectetur doloribus, ut hic non nisi totam, ipsa alias. Quis explicabo similique eligendi repellendus.</p>
+            <button type="button" className="btn btn-primary">Call to Action!</button>
+        </div>
+    )
+}
+
+
+export default Jumbotron;
\ No newline at end of file
diff --git a/src/js/components/Navbar.jsx b/src/js/components/Navbar.jsx
new file mode 100644
index 000000000..f29e2a346
--- /dev/null
+++ b/src/js/components/Navbar.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const Navbar = () => {
+    return (
+        <nav className="navbar navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body" data-bs-theme="dark">
+            <div className="container-fluid d-flex">
+                <a className="navbar-brand ms-4" href="#">Start Bootstrap</a>
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+                <div className="collapse navbar-collapse justify-content-end me-4" id="navbarNavAltMarkup">
+                    <div className="navbar-nav">
+                        <a className="nav-link active" aria-current="page" href="#">Home</a>
+                        <a className="nav-link" href="#">About</a>
+                        <a className="nav-link" href="#">Services</a>
+                        <a className="nav-link" href="#">Contact</a>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Navbar;
\ No newline at end of file
