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..3a3f17c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,10 +5,32 @@ 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 TaskDetails from "./components/TaskDetails"
+import { BrowserRouter as Router, Routes, Route } from "react-router";
+
+// const initialTasks = [
+//     {
+//       title: "Get eight hours of sleep",
+//       description: "Sleepy time tea is a must",
+//       completed: false,
+//     },
+//     {
+//       title: "EOD survey",
+//       description: "The EOD survey is always linked in the Discord",
+//       completed: true,
+//     },
+//     {
+//       title: "Install PostgreSQL",
+//       description: "Don't forget your PostgreSQL password!",
+//       completed: true,
+//     },
+//   ];
 
 const App = () => {
   const [tasks, setTasks] = useState([]);
+  const [users, setUsers] = useState([]);
+  const complete = tasks.filter(task => task.completed === true);
+  const incomplete = tasks.filter(task => task.completed === false);
 
   async function fetchAllTasks() {
     try {
@@ -19,19 +41,34 @@ const App = () => {
     }
   }
 
+  async function fetchAllUsers() {
+    try {
+      const response = await axios.get("http://localhost:8080/api/users");
+      setUsers(response.data);
+    } catch (error) {
+      console.error("Error fetching users:", error);
+    }
+  }
+
   useEffect(() => {
     fetchAllTasks();
+    fetchAllUsers();
   }, []);
 
   return (
     <div>
       <NavBar />
-      <TaskList tasks={tasks} fetchAllTasks={fetchAllTasks} />
-      <AddTask fetchAllTasks={fetchAllTasks} />
+      {/* <TaskList tasks={tasks} fetchAllTasks={fetchAllTasks} />
+      <AddTask fetchAllTasks={fetchAllTasks} /> */}
       <Routes>
         {/* 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="/" element={<TaskList tasks={tasks} fetchAllTasks={fetchAllTasks}/>} />
+        <Route path="/completed" element={<TaskList tasks={complete} fetchAllTasks={fetchAllTasks}/>} />
+        <Route path="/incomplete" element={<TaskList tasks={incomplete} fetchAllTasks={fetchAllTasks}/>} />
+        <Route path="/add-task" element={<AddTask fetchAllTasks={fetchAllTasks}/>} />
+        <Route path="/:id" element={<TaskDetails tasks={tasks} users={users} fetchAllTasks={fetchAllTasks} />} />
       </Routes>
     </div>
   );
diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx
index 3673cf1..0a1abff 100644
--- a/src/components/AddTask.jsx
+++ b/src/components/AddTask.jsx
@@ -1,11 +1,14 @@
 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("");
 
+  let navigate = useNavigate();
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     try {
@@ -16,6 +19,7 @@ const AddTask = ({ fetchAllTasks }) => {
       // After we submit the form, it'd be great if we could navigate back to the home page.
       // Is there a way to programmatically navigate to the home page? 🤔
       fetchAllTasks();
+      navigate("/");
     } catch (error) {
       console.error("Error adding task:", error);
     }
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index 9e63901..07da398 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./NavBarStyles.css";
+import { NavLink } from "react-router";
 
 const NavBar = () => {
   return (
@@ -8,10 +9,14 @@ const NavBar = () => {
       This means that every time we click on a link, the page will reload.
       Let's fix that!
       */}
-      <a href="/">All Tasks</a>
+      {/* <a href="/">All Tasks</a>
       <a href="/completed">Completed Tasks</a>
       <a href="/incomplete">Incomplete Tasks</a>
-      <a href="/add-task">Add Task</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/TaskCard.jsx b/src/components/TaskCard.jsx
index 82258d9..e5460ee 100644
--- a/src/components/TaskCard.jsx
+++ b/src/components/TaskCard.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import axios from "axios";
 import "./TaskCardStyles.css";
+import { Link } from "react-router";
 
 const TaskCard = ({ task, fetchAllTasks }) => {
   const handleCompleteTask = async () => {
@@ -26,7 +27,11 @@ const TaskCard = ({ task, fetchAllTasks }) => {
   return (
     <div className={`task-card ${task.completed ? "completed" : "incomplete"}`}>
       <div className="task-card-header">
-        <h2>{task.title}</h2>
+        <h2>
+          <Link key={task.id} to={`/${task.id}`}>
+            {task.title}
+          </Link>
+        </h2>
         <div className="task-card-header-buttons">
           {task.completed ? (
             <p onClick={handleCompleteTask}>🔄</p>
diff --git a/src/components/TaskDetails.jsx b/src/components/TaskDetails.jsx
new file mode 100644
index 0000000..c442326
--- /dev/null
+++ b/src/components/TaskDetails.jsx
@@ -0,0 +1,57 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router";
+import axios from "axios";
+import "./TaskCardStyles.css";
+
+const TaskDetails = ({ tasks, users, fetchAllTasks }) => {
+  const params = useParams();
+  const id = Number(params.id);
+
+  // useEffect(() => {
+  //   // Fetch the ducks here
+  // }, []);
+
+  const selectedTask = tasks.find((task) => task.id === id);
+  const selectedTaskUser = users.find((user) => user.id ===  selectedTask.userId);
+  const selectedTaskUserName = selectedTaskUser.name;
+
+  const handleCompleteSelectedTask = async () => {
+    try {
+      await axios.patch(`http://localhost:8080/api/tasks/${selectedTask.id}`, {
+        completed: !selectedTask.completed,
+      });
+      fetchAllTasks();
+    } catch (error) {
+      console.error("Error completing task:", error);
+    }
+  };
+
+  const handleDeleteSelectedTask = async () => {
+    try {
+      await axios.delete(`http://localhost:8080/api/tasks/${selectedTask.id}`);
+      fetchAllTasks();
+    } catch (error) {
+      console.error("Error deleting task:", error);
+    }
+  };
+
+  return (
+    <div className={`task-card ${selectedTask.completed ? "completed" : "incomplete"}`}>
+      <div className="task-card-header">
+        <h2>{selectedTask.title}</h2>
+        <div className="task-card-header-buttons">
+          {selectedTask.completed ? (
+            <p onClick={handleCompleteSelectedTask}>🔄</p>
+          ) : (
+            <p onClick={handleCompleteSelectedTask}>✅</p>
+          )}
+          <p onClick={handleDeleteSelectedTask}>🗑️</p>
+        </div>
+      </div>
+      <p>{selectedTask.description}</p>
+      <p>User: {selectedTaskUserName}</p>
+    </div>
+  );
+};
+
+export default TaskDetails;
\ No newline at end of file