diff --git a/client/package-lock.json b/client/package-lock.json
index 5f974e408287837362ea792fb4e3479deb4b3220..c840bd23dd09e77b8e2d3681a9baa4238031f1ed 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.3"
       },
       "devDependencies": {
         "@types/react": "^18.2.56",
@@ -991,6 +992,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.12.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz",
@@ -2916,6 +2925,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
diff --git a/client/package.json b/client/package.json
index 816e54c2a079a5a4fef9b48a2c596a5dd98c1a6f..fc1425e7f33e53b900550791c9427bb12da93d17 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index e73504ed166db764f685eccb3f0713e33c9fc29c..fb484f54bc588df66f48174497ed3f58bfcfdc72 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,6 +1,7 @@
 import './App.css';
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
+import { Outlet } from 'react-router-dom';
 
 function App() {
   return (
@@ -8,7 +9,7 @@ function App() {
       <div className='wrapper'>
         <Header></Header>
         <div className='main'>
-          {/* Main content goes Here */}
+          <Outlet></Outlet>
         </div>
         <Footer></Footer>
       </div>
diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx
index 2cd9b3f1109217ca85e4242327048f474daa1838..7b477fff79a9ac9927882ac78f2e58895cfa6878 100644
--- a/client/src/components/Header/Header.tsx
+++ b/client/src/components/Header/Header.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import './Header.scss';
 
 function Header() {
@@ -8,8 +9,8 @@ function Header() {
           <span className='header-title'>Airline Booking</span>
 
           <nav className='nav'>
-            <a className='nav-item'>Example Nav 1</a>
-            <a className='nav-item'>Nav 2</a>
+            <Link to={'/'} className='nav-item'>Home</Link>
+            <Link to={'test'} className='nav-item'>Test Nav</Link>
           </nav>
         </div>
       </div>
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 7d16b942482bbc5c116c323d308af996388d89c1..8e2d8876ac7420870818462eee6fbba239479052 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,10 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import App from './App.tsx';
 import './index.css';
 
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App></App>,
+    children: [
+      // TODO: Remove this path
+      {
+        path: 'test',
+        element: <div>test</div>
+      }
+    ]
+  }
+]);
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router}></RouterProvider>
   </React.StrictMode>,
 )