diff --git a/package.json b/package.json
index 9386f89..9c487ac 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24f3caf..80b06b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-router-dom:
+        specifier: ^6.28.0
+        version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@eslint/js':
         specifier: ^9.14.0
@@ -424,6 +427,10 @@ packages:
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@remix-run/router@1.21.0':
+    resolution: {integrity: sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==}
+    engines: {node: '>=14.0.0'}
+
   '@rollup/rollup-android-arm-eabi@4.24.4':
     resolution: {integrity: sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==}
     cpu: [arm]
@@ -1934,6 +1941,19 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-router-dom@6.28.0:
+    resolution: {integrity: sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  react-router@6.28.0:
+    resolution: {integrity: sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -2680,6 +2700,8 @@ snapshots:
 
   '@pkgr/core@0.1.1': {}
 
+  '@remix-run/router@1.21.0': {}
+
   '@rollup/rollup-android-arm-eabi@4.24.4':
     optional: true
 
@@ -4295,6 +4317,18 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
+  react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@remix-run/router': 1.21.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-router: 6.28.0(react@18.3.1)
+
+  react-router@6.28.0(react@18.3.1):
+    dependencies:
+      '@remix-run/router': 1.21.0
+      react: 18.3.1
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
diff --git a/src/App.tsx b/src/App.tsx
index 2b074c3..2163376 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,18 @@
 import './App.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Navbar from './components/navbar';
+import FeatureFlagList from './pages/FeatureFlagList';
+import FeatureFlagDetails from './pages/FeatureFlagDetails';
 
 const App = () => {
   return (
-    <>
+    <BrowserRouter>
       <Navbar />
-    </>
+      <Routes>
+        <Route path="/featureFlag" element={<FeatureFlagList />} />
+        <Route path="/featureFlag/:id" element={<FeatureFlagDetails />} />
+      </Routes>
+    </BrowserRouter>
   );
 };
 
diff --git a/src/pages/FeatureFlagDetails.tsx b/src/pages/FeatureFlagDetails.tsx
new file mode 100644
index 0000000..74f1bc4
--- /dev/null
+++ b/src/pages/FeatureFlagDetails.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const FeatureFlagDetails: React.FC = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="container mx-auto mt-20 p-4">
+      <h1 className="mb-4 text-2xl font-bold">Feature Flag Details</h1>
+      <p>Feature Flag ID: {id}</p>
+    </div>
+  );
+};
+
+export default FeatureFlagDetails;
diff --git a/src/pages/FeatureFlagList.tsx b/src/pages/FeatureFlagList.tsx
new file mode 100644
index 0000000..f560dfa
--- /dev/null
+++ b/src/pages/FeatureFlagList.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+const FeatureFlagList: React.FC = () => {
+  return (
+    <div className="container mx-auto mt-20 p-4">
+      <h1 className="mb-4 text-2xl font-bold">Feature Flags</h1>
+    </div>
+  );
+};
+
+export default FeatureFlagList;