diff --git a/package-lock.json b/package-lock.json
index 16f6f39..ea74e9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "ttp-react-forms",
+  "name": "ttp-client-side-routing",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ttp-react-forms",
+      "name": "ttp-client-side-routing",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
diff --git a/src/App.jsx b/src/App.jsx
index 14763f7..c36e70f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,11 @@ import "./AppStyles.css";
 import TaskList from "./components/TaskList";
 import AddTask from "./components/AddTask";
 import NavBar from "./components/NavBar";
-import { BrowserRouter as Router, Routes } from "react-router";
+import CompletedTasks from "./components/CompleteTasks";
+import TaskDetail from "./components/SingleTask";
+import { BrowserRouter as Router, Routes, Route } from "react-router";
+import SingleTask from "./components/SingleTask";
+import IncompleteTasks from "./components/IncompleteTasks";
 
 const App = () => {
   const [tasks, setTasks] = useState([]);
@@ -26,12 +30,15 @@ const App = () => {
   return (
     <div>
       <NavBar />
-      <TaskList tasks={tasks} fetchAllTasks={fetchAllTasks} />
-      <AddTask fetchAllTasks={fetchAllTasks} />
       <Routes>
+        <Route path="/" element={<TaskList tasks={tasks} fetchAllTasks={fetchAllTasks} />}/>
         {/* Currently, we don't have any routes defined. And you can see above that we're
             rendering the TaskList and AddTask components directly, no matter what our URL looks like.
             Let's fix that! */}
+        <Route path="/add-task" element = {<AddTask fetchAllTasks={fetchAllTasks} />}></Route>
+        <Route path="/completed" element={<CompletedTasks tasks={tasks} fetchAllTasks={fetchAllTasks} />} />
+        <Route path="/incomplete" element={<IncompleteTasks tasks={tasks} fetchAllTasks={fetchAllTasks} />}></Route>
+        <Route path="/tasks/:id" element = {<SingleTask/>}></Route>
       </Routes>
     </div>
   );
diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx
index 3673cf1..322aba1 100644
--- a/src/components/AddTask.jsx
+++ b/src/components/AddTask.jsx
@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import axios from "axios";
 import "./AddTaskStyles.css";
+import { useNavigate } from "react-router";
 
 const AddTask = ({ fetchAllTasks }) => {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-
+  const navigate = useNavigate();
   const handleSubmit = async (event) => {
     event.preventDefault();
     try {
@@ -36,7 +37,9 @@ const AddTask = ({ fetchAllTasks }) => {
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
-        <button type="submit">Add</button>
+        <button type="submit" onClick={() => navigate("/")}>
+          Add
+        </button>
       </form>
     </div>
   );
diff --git a/src/components/CompleteTasks.jsx b/src/components/CompleteTasks.jsx
new file mode 100644
index 0000000..515ad81
--- /dev/null
+++ b/src/components/CompleteTasks.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TaskList from "./TaskList";
+
+const CompletedTasks = ({ tasks, fetchAllTasks }) => {
+  const completedTasks = tasks.filter((task) => task.completed);
+  return <TaskList tasks={completedTasks} fetchAllTasks={fetchAllTasks} />;
+};
+
+export default CompletedTasks;
\ No newline at end of file
diff --git a/src/components/IncompleteTasks.jsx b/src/components/IncompleteTasks.jsx
new file mode 100644
index 0000000..46c5772
--- /dev/null
+++ b/src/components/IncompleteTasks.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TaskList from "./TaskList";
+
+const IncompleteTasks = ({ tasks, fetchAllTasks }) => {
+  const incompleteTasks = tasks.filter((task) => !task.completed);
+  return <TaskList tasks={incompleteTasks} fetchAllTasks={fetchAllTasks} />;
+};
+
+export default IncompleteTasks;
\ No newline at end of file
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index 9e63901..17a0cd9 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -1,17 +1,19 @@
 import React from "react";
+import { NavLink } from "react-router";
+
 import "./NavBarStyles.css";
 
 const NavBar = () => {
   return (
     <nav className="navbar">
-      {/* Currently, we're using <a> tags to navigate to different pages.
-      This means that every time we click on a link, the page will reload.
+      {/* Currently, we're using <NavLink> tags to navigate to different pages.
+      This means that every time we click on NavLink link, the page will reload.
       Let's fix that!
       */}
-      <a href="/">All Tasks</a>
-      <a href="/completed">Completed Tasks</a>
-      <a href="/incomplete">Incomplete Tasks</a>
-      <a href="/add-task">Add Task</a>
+      <NavLink to="/">All Tasks</NavLink>
+      <NavLink to="/completed">Completed Tasks</NavLink>
+      <NavLink to="/incomplete">Incomplete Tasks</NavLink>
+      <NavLink to="/add-task">Add Task</NavLink>
     </nav>
   );
 };
diff --git a/src/components/SingleTask.jsx b/src/components/SingleTask.jsx
new file mode 100644
index 0000000..c42b749
--- /dev/null
+++ b/src/components/SingleTask.jsx
@@ -0,0 +1,28 @@
+import axios from "axios";
+import React, {useEffect} from "react"
+import { useParams } from "react-router";
+
+const SingleTask = () => {
+    const params = useParams();
+    const id = Number(params.id);
+
+    const fetchTaskById = async () => {
+        try {
+            await axios.get(`http://localhost:8080/api/tasks/${task.id}`);
+            const task = response.data
+        } catch (error) {
+            console.log("Failed to fetch task by id", error)
+        }
+    }
+    useEffect(() => {
+        fetchTaskById();
+    }, []);
+
+    return (
+        <main>
+            
+        </main>
+    )
+};
+
+export default SingleTask;
\ No newline at end of file
diff --git a/src/components/TaskCard.jsx b/src/components/TaskCard.jsx
index 82258d9..4049a7c 100644
--- a/src/components/TaskCard.jsx
+++ b/src/components/TaskCard.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import axios from "axios";
+import {Link} from "react-router";
 import "./TaskCardStyles.css";
 
 const TaskCard = ({ task, fetchAllTasks }) => {
@@ -26,7 +27,7 @@ const TaskCard = ({ task, fetchAllTasks }) => {
   return (
     <div className={`task-card ${task.completed ? "completed" : "incomplete"}`}>
       <div className="task-card-header">
-        <h2>{task.title}</h2>
+        <Link to={`/tasks/${task.id}`}><h2>{task.title}</h2></Link> 
         <div className="task-card-header-buttons">
           {task.completed ? (
             <p onClick={handleCompleteTask}>🔄</p>