diff --git a/frontend/web-app/src/Components/NavBar.tsx b/frontend/web-app/src/Components/NavBar.tsx
index 7976298..5289f58 100644
--- a/frontend/web-app/src/Components/NavBar.tsx
+++ b/frontend/web-app/src/Components/NavBar.tsx
@@ -1,8 +1,16 @@
 import React from 'react'
+import { Link, Outlet } from 'react-router-dom';
 
 function NavBar() {
   return (
-    <div>NavBar</div>
+    <div>
+      <div>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/faq">FAQ</Link>
+      </div>
+      <Outlet />
+    </div>
   )
 };
 
diff --git a/frontend/web-app/src/Components/Router.tsx b/frontend/web-app/src/Components/Router.tsx
index 3dd0cde..bd774be 100644
--- a/frontend/web-app/src/Components/Router.tsx
+++ b/frontend/web-app/src/Components/Router.tsx
@@ -5,6 +5,7 @@ import PlantDetailPage from "../Pages/PlantDetailPage";
 import AboutPage from "../Pages/AboutPage";
 import FaqPage from "../Pages/FaqPage";
 import ErrorPage from "../Pages/ErrorPage";
+import NavBar from "./NavBar";
 
 const router = createBrowserRouter([
     {
@@ -16,20 +17,26 @@ const router = createBrowserRouter([
     },
     {
         path: '/',
-        element: <HomePage/>,
+        element: <NavBar />,
+        children: [
+            {
+                path: '/',
+                element: <HomePage/>,
+            },
+            {
+                path: '/plant_detail',
+                element: <PlantDetailPage/>,
+            },
+            {
+                path: '/about',
+                element: <AboutPage />,
+            },
+            {
+                path: '/faq',
+                element: <FaqPage />,
+            }
+        ]
     },
-    {
-        path: '/plant_detail',
-        element: <PlantDetailPage/>,
-    },
-    {
-        path: '/about',
-        element: <AboutPage />,
-    },
-    {
-        path: '/faq',
-        element: <FaqPage />,
-    }
 ]);
 
 function Provider() {