diff --git a/web/package-lock.json b/web/package-lock.json
index 4d6aa63..d561c10 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-router-dom": "^7.5.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -1863,6 +1864,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2863,6 +2873,45 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.1.tgz",
+      "integrity": "sha512-/jjU3fcYNd2bwz9Q0xt5TwyiyoO8XjSEFXJY4O/lMAlkGTHWuHRAbR9Etik+lSDqMC7A7mz3UlXzgYT6Vl58sA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.1.tgz",
+      "integrity": "sha512-5DPSPc7ENrt2tlKPq0FtpG80ZbqA9aIKEyqX6hSNJDlol/tr6iqCK4crqdsusmOSSotq6zDsn0y3urX9TuTNmA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.5.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2971,6 +3020,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3056,6 +3111,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/web/package.json b/web/package.json
index addbdf9..3a4f6c8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.5.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 32a02e5..cc91ce8 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,44 +1,31 @@
-import { useEffect, useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
 import "./App.css";
 
-function App() {
-  const [count, setCount] = useState(0);
-  const [apiData, setApiData] = useState("");
-
-  useEffect(() => {
-    fetch(import.meta.env.VITE_BASE_API_URL + "/api/test")
-      .then((res) => res.json())
-      .then((body) => setApiData(body.message));
-  });
+import Navbar from "./components/Navbar";
+import Profile from "./pages/Profile";
+import Login from "./pages/auth/Login";
+import Signup from "./pages/auth/Signup";
+import Dashboard from "./pages/Dashboard";
+import Schedule from "./pages/Schedule";
+import Activities from "./pages/Activities";
+import Quizzes from "./pages/Quizzes";
+import LeetcodeQuizzes from "./pages/LeetcodeQuizzes";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
+function App() {
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          <strong>Message from api:</strong> {apiData}
-        </p>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <Router>
+      <Navbar />
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/profile" element={<Profile />} />
+        <Route path="/schedule" element={<Schedule />} />
+        <Route path="/activities" element={<Activities />} />
+        <Route path="/quizzes" element={<Quizzes />} />
+        <Route path="/leetcode-quizzes" element={<LeetcodeQuizzes />} />
+      </Routes>
+    </Router>
   );
 }
 
diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
new file mode 100644
index 0000000..e1baccd
--- /dev/null
+++ b/web/src/components/Navbar.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Navbar() {
+  return (
+    <div>
+      <h1>Navbar</h1>
+    </div>
+  );
+}
+
+export default Navbar;
diff --git a/web/src/pages/Activities.tsx b/web/src/pages/Activities.tsx
new file mode 100644
index 0000000..67a9867
--- /dev/null
+++ b/web/src/pages/Activities.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Activities() {
+  return (
+    <div>
+      <h1>Activities and Events</h1>
+    </div>
+  );
+}
+
+export default Activities;
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..c3b5729
--- /dev/null
+++ b/web/src/pages/Dashboard.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Dashboard() {
+  return (
+    <div>
+      <h1>Dashboard Page</h1>
+    </div>
+  );
+}
+
+export default Dashboard;
diff --git a/web/src/pages/LeetcodeQuizzes.tsx b/web/src/pages/LeetcodeQuizzes.tsx
new file mode 100644
index 0000000..079cde9
--- /dev/null
+++ b/web/src/pages/LeetcodeQuizzes.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function LeetcodeQuizzes() {
+  return (
+    <div>
+      <h1>Leetcode Quizzes</h1>
+    </div>
+  );
+}
+
+export default LeetcodeQuizzes;
diff --git a/web/src/pages/Profile.tsx b/web/src/pages/Profile.tsx
new file mode 100644
index 0000000..d695e20
--- /dev/null
+++ b/web/src/pages/Profile.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Profile() {
+  return (
+    <div>
+      <h1>Profile</h1>
+    </div>
+  );
+}
+
+export default Profile;
diff --git a/web/src/pages/Quizzes.tsx b/web/src/pages/Quizzes.tsx
new file mode 100644
index 0000000..491f2b5
--- /dev/null
+++ b/web/src/pages/Quizzes.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Quizzes() {
+  return (
+    <div>
+      <h1>Quizzes</h1>
+    </div>
+  );
+}
+
+export default Quizzes;
diff --git a/web/src/pages/Schedule.tsx b/web/src/pages/Schedule.tsx
new file mode 100644
index 0000000..af25c44
--- /dev/null
+++ b/web/src/pages/Schedule.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Schedule() {
+  return (
+    <div>
+      <h1>Schedule View</h1>
+    </div>
+  );
+}
+
+export default Schedule;
diff --git a/web/src/pages/auth/Login.tsx b/web/src/pages/auth/Login.tsx
new file mode 100644
index 0000000..398c818
--- /dev/null
+++ b/web/src/pages/auth/Login.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Login() {
+  return (
+    <div>
+      <h1>Login</h1>
+    </div>
+  );
+}
+
+export default Login;
diff --git a/web/src/pages/auth/Signup.tsx b/web/src/pages/auth/Signup.tsx
new file mode 100644
index 0000000..e0564be
--- /dev/null
+++ b/web/src/pages/auth/Signup.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Signup() {
+  return (
+    <div>
+      <h1>Signup</h1>
+    </div>
+  );
+}
+
+export default Signup;