diff --git a/package-lock.json b/package-lock.json
index cd606935..4a36cfa9 100644
--- a/package-lock.json
+++ b/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.11.2"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -766,6 +767,14 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz",
+      "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1226,6 +1235,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz",
+      "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==",
+      "dependencies": {
+        "@remix-run/router": "1.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz",
+      "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==",
+      "dependencies": {
+        "@remix-run/router": "1.6.2",
+        "react-router": "6.11.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -1853,6 +1892,11 @@
         }
       }
     },
+    "@remix-run/router": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz",
+      "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA=="
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2176,6 +2220,23 @@
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
       "dev": true
     },
+    "react-router": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz",
+      "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==",
+      "requires": {
+        "@remix-run/router": "1.6.2"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz",
+      "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==",
+      "requires": {
+        "@remix-run/router": "1.6.2",
+        "react-router": "6.11.2"
+      }
+    },
     "resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
diff --git a/package.json b/package.json
index 154dd4dd..208323e3 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
diff --git a/src/App.jsx b/src/App.jsx
index 7743965b..b88d1813 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,59 +1,127 @@
-/*
- * Temporary problems array schema
- */
-const problems = [{
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes, Link, useParams } from 'react-router-dom';
+
+const problems = [
+  {
     title: "201. Bitwise AND of Numbers Range",
     difficulty: "Medium",
     acceptance: "42%"
-},{
+  },
+  {
     title: "201. Bitwise AND of Numbers Range",
     difficulty: "Medium",
     acceptance: "412%"
-},
-    {
-        title: "202. Happy Number",
-        difficulty: "Easy",
-        acceptance: "54.9%"
-    },
-    {
-        title: "203. Remove Linked List Elements",
-        difficulty: "Hard",
-        acceptance: "42%"
-    }];
-
+  },
+  {
+    title: "202. Happy Number",
+    difficulty: "Easy",
+    acceptance: "54.9%"
+  },
+  {
+    title: "203. Remove Linked List Elements",
+    difficulty: "Hard",
+    acceptance: "42%"
+  }
+];
 
 function App() {
+  return (
+    <Router>
+      <div>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/login">Login</Link>
+            </li>
+            <li>
+              <Link to="/signup">Signup</Link>
+            </li>
+            <li>
+              <Link to="/problemset/all/">All Problems</Link>
+            </li>
+          </ul>
+        </nav>
 
-    /* Add routing here, routes look like -
-       /login - Login page
-       /signup - Signup page
-       /problemset/all/ - All problems (see problems array above)
-       /problems/:problem_slug - A single problem page
-     */
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/problemset/all/" element={<ProblemSetPage />} />
+          <Route path="/problems/:problem_slug" element={<ProblemPage />} />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
 
-    return (
+function LoginPage() {
+  return (
     <div>
-        Finish the assignment! Look at the comments in App.jsx as a starting point
+      <h1>Login Page</h1>
     </div>
-  )
+  );
+}
+
+function SignupPage() {
+  return (
+    <div>
+      <h1>Signup Page</h1>
+    </div>
+  );
+}
+
+function ProblemSetPage() {
+  return (
+    <div>
+      <h1>All Problems</h1>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Acceptance</th>
+            <th>Difficulty</th>
+          </tr>
+        </thead>
+        <tbody>
+          {problems.map((problem, index) => (
+            <ProblemStatement key={index} {...problem} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function ProblemPage() {
+  const { problem_slug } = useParams();
+
+  // Find the problem based on the slug
+  const problem = problems.find(
+    problem => problem.title.toLowerCase().replace(/\s/g, '-') === problem_slug
+  );
+
+  if (!problem) {
+    return <h2>Problem not found!</h2>;
+  }
+
+  return (
+    <div>
+      <h2>{problem.title}</h2>
+      <p>Difficulty: {problem.difficulty}</p>
+      <p>Acceptance: {problem.acceptance}</p>
+    </div>
+  );
 }
 
-// A demo component
 function ProblemStatement(props) {
-    const title = props.title;
-    const acceptance = props.acceptance;
-    const difficulty = props.difficulty;
-
-    return <tr>
-        <td>
-            {title}
-        </td>
-        <td>
-            {acceptance}
-        </td>
-        <td>
-            {difficulty}
-        </td>
+  const { title, acceptance, difficulty } = props;
+
+  return (
+    <tr>
+      <td>{title}</td>
+      <td>{acceptance}</td>
+      <td>{difficulty}</td>
     </tr>
+  );
 }
-export default App
+
+export default App;