diff --git a/ui/package-lock.json b/ui/package-lock.json
index 1235bb6..737b21f 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -14,6 +14,7 @@
         "eslint": "^8.17.0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -7664,6 +7665,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11923,6 +11932,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -20153,6 +20186,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -23112,6 +23153,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index b5d29c9..a2cf7f0 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,6 +9,7 @@
     "eslint": "^8.17.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/ui/src/App.js b/ui/src/App.js
index 63ee3bf..a8f3d24 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -1,8 +1,17 @@
 import Header from "./components/Header/Header";
+import { Routes, Route } from "react-router-dom";
+
 
 function App() {
   return (
-    <div>Hey</div>
+    <Routes>
+      <Route path="/" />
+      <Route path="/login" element={<Login />} />
+      <Route path="/flag?mode=edit" element={<FlagEdit />} />
+      <Route path="/flag?mode=create" element={<FlagCreate />} />
+
+
+    </Routes>
   );
 }
 
diff --git a/ui/src/Components/FlagMode/FlagCreate.js b/ui/src/Components/FlagMode/FlagCreate.js
new file mode 100644
index 0000000..8f2e6a6
--- /dev/null
+++ b/ui/src/Components/FlagMode/FlagCreate.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const FlagCreate = () => {
+  return <div>FlagCreate</div>;
+};
+
+export default FlagCreate;
diff --git a/ui/src/Components/FlagMode/FlagEdit.js b/ui/src/Components/FlagMode/FlagEdit.js
new file mode 100644
index 0000000..d7b496c
--- /dev/null
+++ b/ui/src/Components/FlagMode/FlagEdit.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const FlagEdit = () => {
+  return <div>FlagEdit</div>;
+};
+
+export default FlagEdit;
diff --git a/ui/src/Components/Login/Login.js b/ui/src/Components/Login/Login.js
index e69de29..561461a 100644
--- a/ui/src/Components/Login/Login.js
+++ b/ui/src/Components/Login/Login.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Login = () => {
+  return <div>Login</div>;
+};
diff --git a/ui/src/index.js b/ui/src/index.js
index d563c0f..13e73aa 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from "react-router-dom";
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -7,7 +8,9 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );