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..104aeb01b 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,28 +1,18 @@
-import React from "react";
 
+import React from "react";
+import NavbarComponent from "./NavbarComponents";
+import Jumbotron from "./Jumbotron";
 //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>
+		<>
+		<NavbarComponent/>
+		<Jumbotron/>
+		</>	
 	);
 };
 
-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..dbbfb4100
--- /dev/null
+++ b/src/js/components/Jumbotron.jsx
@@ -0,0 +1,13 @@
+function Jumbotron () {
+        return(
+            <div className="card text-bg-light w-75 mx-auto p-2"> 
+             <div className="card-body">
+                <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">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