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..cf6e218 100644
--- a/frontend/web-app/src/Components/Router.tsx
+++ b/frontend/web-app/src/Components/Router.tsx
@@ -5,6 +5,9 @@ import PlantDetailPage from "../Pages/PlantDetailPage";
 import AboutPage from "../Pages/AboutPage";
 import FaqPage from "../Pages/FaqPage";
 import ErrorPage from "../Pages/ErrorPage";
+import NavBar from "./NavBar";
+import SignUpPage from "../Pages/SignUpPage";
+import DisplayPage from "../Pages/DisplayPage";
 
 const router = createBrowserRouter([
     {
@@ -15,21 +18,35 @@ const router = createBrowserRouter([
         element: <LoginPage/>,
     },
     {
-        path: '/',
-        element: <HomePage/>,
+        path: '/signup',
+        element: <SignUpPage />,
     },
     {
-        path: '/plant_detail',
-        element: <PlantDetailPage/>,
+        path: '/display',
+        element: <DisplayPage />
     },
     {
-        path: '/about',
-        element: <AboutPage />,
+        path: '/',
+        element: <NavBar />,
+        children: [
+            {
+                path: '/',
+                element: <HomePage/>,
+            },
+            {
+                path: '/plant_detail',
+                element: <PlantDetailPage/>,
+            },
+            {
+                path: '/about',
+                element: <AboutPage />,
+            },
+            {
+                path: '/faq',
+                element: <FaqPage />,
+            }
+        ]
     },
-    {
-        path: '/faq',
-        element: <FaqPage />,
-    }
 ]);
 
 function Provider() {
diff --git a/frontend/web-app/src/Pages/DisplayPage.tsx b/frontend/web-app/src/Pages/DisplayPage.tsx
new file mode 100644
index 0000000..d40f6e9
--- /dev/null
+++ b/frontend/web-app/src/Pages/DisplayPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function DisplayPage() {
+  return (
+    <div>DisplayPage</div>
+  )
+}
+
+export default DisplayPage
\ No newline at end of file
diff --git a/frontend/web-app/src/Pages/SignUpPage.tsx b/frontend/web-app/src/Pages/SignUpPage.tsx
new file mode 100644
index 0000000..ffec4e8
--- /dev/null
+++ b/frontend/web-app/src/Pages/SignUpPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SignUpPage() {
+  return (
+    <div>SignUpPage</div>
+  )
+}
+
+export default SignUpPage
\ No newline at end of file