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..f7971e980 100644
--- a/src/js/components/Home.jsx
+++ b/src/js/components/Home.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-
+import Navbar from "./Navbar";
 //include images into your bundle
 import rigoImage from "../../img/rigo-baby.jpg";
 
@@ -7,20 +7,7 @@ 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>
 	);
 };
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"