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..679168116 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,5 +1,6 @@
 import React from "react";
-
+import Navbar from "./Navbar";
+import Jumbotron from "./Jumbotron";
 //include images into your bundle
 import rigoImage from "../../img/rigo-baby.jpg";
 
@@ -7,22 +8,19 @@ import rigoImage from "../../img/rigo-baby.jpg";
 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>
+			<Navbar/>
+     	<div className="container">
+            <Jumbotron/>
+
+
+
+
+
+
+
+		</div>
 		</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..bc5a63299
--- /dev/null
+++ b/src/js/components/Jumbotron.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+function Jumbotron() {
+  return (
+    <div className="bg-body-secondary mt-4">
+            <div className="container-fluid text-start py-4">
+                <h1 className="fw-medium display-2 py-4 ms-5">A Warm Welcome!</h1>
+                <p className="fs-5 py-2 ms-5">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.
+                </p>
+                <button className="btn btn-primary btn-lg ms-5 mb-5" type="button">
+                    Call to action!
+                </button>
+            </div>
+        </div>
+  )
+}
+
+export default Jumbotron
diff --git a/src/js/components/Navbar.jsx b/src/js/components/Navbar.jsx
new file mode 100644
index 000000000..bf9ee6874
--- /dev/null
+++ b/src/js/components/Navbar.jsx
@@ -0,0 +1,64 @@
+import React from 'react'
+
+function Navbar() {
+  return (
+    <div className='bg-dark p-3 '>
+      
+  <nav class="d-flex justify-content-between align-items-center d-none d-md-flex">
+    <ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active link-light" aria-current="page" href="#">Start Bootstrap</a>
+  </li>
+    </ul>
+      <ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active link-light" aria-current="page" href="#">Home</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary  " href="#">About</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Services</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Contact</a>
+  </li>
+</ul>
+</nav>
+
+
+<nav class="navbar navbar-dark bg-dark d-md-none">
+  <div class="container-fluid">
+    <div>
+      <a class="navbar-brand" href="#">Start Bootstrap</a>
+    </div>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+  </div>
+</nav>
+
+<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
+  <div class="bg-dark p-4 ">
+<ul class="nav flex-column align-items-start">
+  <li class="nav-item">
+    <a class="nav-link active link-light" aria-current="page" href="#">Home</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary  " href="#">About</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Services</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link link-secondary" href="#">Contact</a>
+  </li>
+</ul>
+  </div>
+</div>
+
+    </div>
+  )
+}
+
+export default Navbar
diff --git a/src/js/main.jsx b/src/js/main.jsx
index 14662105b..95982d9b8 100644
--- a/src/js/main.jsx
+++ b/src/js/main.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
+
 //Bootstrap
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap"