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..879b26e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,12 @@ 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 Users from "./components/Users";
+import UserTasks from "./components/UserTask";
+
+import { BrowserRouter as Router, Routes, Route } from "react-router";
+
 
 const App = () => {
   const [tasks, setTasks] = useState([]);
@@ -26,12 +31,20 @@ const App = () => {
   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={tasks.filter((task) => task.completed)} fetchAllTasks={fetchAllTasks} />} />
+        <Route path="/incomplete" element={<TaskList tasks={tasks.filter((task) => !task.completed)} fetchAllTasks={fetchAllTasks} />} />
+        <Route path="/add-task" element={<AddTask fetchAllTasks={fetchAllTasks} />} />
+        <Route path="/tasks/:id" element={<TaskDetails tasks={tasks} />} />
+        <Route path="/users" element={<Users />} />
+        <Route path="/users/:id" element={<UserTasks />} />
       </Routes>
     </div>
   );
diff --git a/src/components/AddTask.jsx b/src/components/AddTask.jsx
index 3673cf1..2fc4b00 100644
--- a/src/components/AddTask.jsx
+++ b/src/components/AddTask.jsx
@@ -1,10 +1,11 @@
 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();
@@ -16,6 +17,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..210fba6 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -12,6 +12,7 @@ const NavBar = () => {
       <a href="/completed">Completed Tasks</a>
       <a href="/incomplete">Incomplete Tasks</a>
       <a href="/add-task">Add Task</a>
+      <a href="/users">Users</a>
     </nav>
   );
 };
diff --git a/src/components/TaskCard.jsx b/src/components/TaskCard.jsx
index 82258d9..d89d7cb 100644
--- a/src/components/TaskCard.jsx
+++ b/src/components/TaskCard.jsx
@@ -1,14 +1,21 @@
 import React from "react";
 import axios from "axios";
 import "./TaskCardStyles.css";
+import { Link } from "react-router";
+
 
 const TaskCard = ({ task, fetchAllTasks }) => {
+
+
+
   const handleCompleteTask = async () => {
     try {
       await axios.patch(`http://localhost:8080/api/tasks/${task.id}`, {
         completed: !task.completed,
       });
       fetchAllTasks();
+
+      console.log(task.id);
     } catch (error) {
       console.error("Error completing task:", error);
     }
@@ -26,7 +33,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}`}>{task.title}</Link>
         <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..d7a46d8
--- /dev/null
+++ b/src/components/TaskDetails.jsx
@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import axios from "axios";
+
+const TaskDetails = ({ tasks }) => {
+    const { id } = useParams();
+    const taskId = Number(id);
+
+    const [task, setTask] = useState(null);
+
+    useEffect(() => {
+        if (tasks && tasks.length > 0) {
+            const localTask = tasks.find((t) => t.id === taskId);
+            if (localTask) {
+                setTask(localTask);
+            }
+        } else {
+            axios.get(`/api/tasks/${taskId}`)
+                .then((res) => setTask(res.data))
+                .catch((err) => console.error("Error fetching task:", err));
+        }
+    }, [tasks, taskId]);
+
+
+    if (!task) return <p>Loading task...</p>;
+
+    return (
+        <div className="task-card">
+            <div className="task-card-header">
+                <h1>{task.title}</h1>
+                <p>{task.description}</p>
+                <p>{task.completed ? "✅ Completed" : "❌ Incomplete"}</p>
+                <p>Assigned to: {task.user?.name || "Unknown"}</p>
+            </div>
+        </div>
+    )
+
+
+
+}
+
+export default TaskDetails;
\ No newline at end of file
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
index 43487ef..21ba922 100644
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 import TaskCard from "./TaskCard";
 
+
 const TaskList = ({ tasks, fetchAllTasks }) => {
   return (
     <div>
diff --git a/src/components/UserTask.jsx b/src/components/UserTask.jsx
new file mode 100644
index 0000000..1497821
--- /dev/null
+++ b/src/components/UserTask.jsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import axios from "axios";
+
+const UserTasks = () => {
+    const { id } = useParams(); // Get user id from URL params
+    const [tasks, setTasks] = useState([]);
+
+    useEffect(() => {
+        async function fetchUserTasks() {
+            try {
+                const response = await axios.get(`http://localhost:8080/api/users/${id}/tasks`);
+                setTasks(response.data);
+            } catch (error) {
+                console.error("Failed to fetch tasks:", error);
+            }
+        }
+        fetchUserTasks();
+    }, [id]);
+
+    return (
+        <div>
+            <h2>User {id}'s Tasks</h2>
+            {tasks.length === 0 ? (
+                <p>No tasks found for this user.</p>
+            ) : (
+                <ul>
+                    {tasks.map(task => (
+                        <li key={task.id}>
+                            <strong>{task.title}</strong>: {task.description} [{task.completed ? "Done" : "Pending"}]
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default UserTasks;
diff --git a/src/components/Users.jsx b/src/components/Users.jsx
new file mode 100644
index 0000000..1b86c4a
--- /dev/null
+++ b/src/components/Users.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router';
+
+const Users = () => {
+    const [users, setUsers] = useState([]);
+
+    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(() => {
+        fetchAllUsers();
+    }, []);
+
+
+
+
+    return (
+        <div className="task-card">
+            <div className="task-card-header">
+                <h1>Users List</h1>
+                {users.map((user) => (
+                    <div key={user.id}>
+                        <Link to={`/users/${users.id}`}>{user.name}</Link>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Users