diff --git a/client/src/components/task_form.tsx b/client/src/components/task_form.tsx
new file mode 100644
index 0000000..c77b170
--- /dev/null
+++ b/client/src/components/task_form.tsx
@@ -0,0 +1,127 @@
+import { useEffect,useState } from "react";
+
+import { TimeInput } from "@/components/time_input";
+import { TopicInput } from "@/components/topic_input";
+
+interface Time {
+  id: number;
+  day: number;
+  start_time: string;
+  end_time: string;
+  repeating: boolean;
+}
+
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
+type TopicSelection =
+  | { type: "existing"; id: number }
+  | { type: "new"; name: string; color_hex: number };
+
+interface Item {
+  id: number;
+  name: string;
+  completed: boolean;
+  description: string;
+  times: Time[];
+  topics: Topic[];
+}
+
+interface TaskFormProps {
+  userId: number;
+  onTaskCreated: (task: Item) => void;
+}
+
+export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
+  const [taskName, setTaskName] = useState("");
+  const [description, setDescription] = useState("");
+  const [times, setTimes] = useState<Time[]>([]);
+  const [topics, setTopics] = useState<TopicSelection[]>([]);
+  const [availableTopics, setAvailableTopics] = useState<Topic[]>([]);
+
+  useEffect(() => {
+    fetch("http://localhost:8000/api/planner/topic/")
+      .then((res) => res.json())
+      .then((data) => setAvailableTopics(data))
+      .catch((err) => console.error("Failed to load topics:", err));
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const existing_topic_ids = topics
+        .filter((t) => t.type === "existing")
+        .map((t) => t.id);
+
+      const new_topics = topics
+        .filter((t) => t.type === "new")
+        .map((t) => ({ name: t.name, color_hex: t.color_hex }));
+      const response = await fetch("http://localhost:8000/api/planner/tasks/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: taskName,
+          description: description,
+          completed: false,
+          user_id: userId,
+          times: times,
+          existing_topic_ids: existing_topic_ids,
+          new_topics: new_topics,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to create task");
+      }
+
+      const newTask = await response.json();
+      onTaskCreated(newTask);
+      setTaskName("");
+      setDescription("");
+      setTimes([]);
+      setTopics([]);
+    } catch (error) {
+      console.error("Error creating task:", error);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="mx-auto h-[79vh] w-full max-w-md space-y-4 overflow-y-auto rounded-xl bg-zinc-700 p-4"
+    >
+      <input
+        type="text"
+        value={taskName}
+        onChange={(e) => setTaskName(e.target.value)}
+        placeholder="Task Name"
+        className="w-full rounded border-2 bg-zinc-700 p-2 text-zinc-200"
+        required
+      />
+      <textarea
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder="Description"
+        className="h-32 w-full resize-none rounded border-2 bg-zinc-700 p-2 text-zinc-200"
+      />
+      <TimeInput times={times} setTimes={setTimes} />
+      <TopicInput
+        availableTopics={availableTopics}
+        topics={topics}
+        setTopics={setTopics}
+      />
+
+      <button
+        type="submit"
+        className="rounded border-2 border-zinc-200 bg-blue-600 px-4 py-2 text-zinc-200 hover:bg-blue-700"
+      >
+        Add Task
+      </button>
+    </form>
+  );
+}
diff --git a/client/src/components/task_item.tsx b/client/src/components/task_item.tsx
new file mode 100644
index 0000000..13c957f
--- /dev/null
+++ b/client/src/components/task_item.tsx
@@ -0,0 +1,240 @@
+import { useState } from "react";
+
+import { TimeInput } from "@/components/time_input";
+import { TopicInput } from "@/components/topic_input";
+
+interface Time {
+  id: number;
+  day: number;
+  start_time: string;
+  end_time: string;
+  repeating: boolean;
+}
+
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
+interface Item {
+  id: number;
+  name: string;
+  completed: boolean;
+  description: string;
+  times: Time[];
+  topics: Topic[];
+}
+
+type ItemProps = {
+  item: Item;
+  onToggle?: (id: number) => void;
+  onUpdate: (item: Item) => void;
+  availableTopics: Topic[];
+};
+
+type TopicSelection =
+  | { type: "existing"; id: number }
+  | { type: "new"; name: string; color_hex: number };
+
+export function TaskItem({
+  item,
+  onToggle,
+  onUpdate,
+  availableTopics,
+}: ItemProps) {
+  {
+    /* Editing Functionality */
+  }
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftName, setDraftName] = useState(item.name);
+  const [draftDescription, setDraftDescription] = useState(item.description);
+  const [draftTopics, setDraftTopics] = useState<TopicSelection[]>([]);
+  const [draftTimes, setDraftTimes] = useState<Time[]>([]);
+  const [saving, setSaving] = useState(false);
+
+  function startEdit() {
+    setDraftName(item.name);
+    setDraftDescription(item.description);
+    setDraftTopics(
+      item.topics.map((t) => ({
+        type: "existing",
+        id: t.id,
+      })),
+    );
+    setDraftTimes(item.times.map((t) => ({ ...t })));
+    setIsEditing(true);
+  }
+
+  function cancelEdit() {
+    setDraftName(item.name);
+    setDraftDescription(item.description);
+    setDraftTopics(item.topics.map((t) => ({ type: "existing", id: t.id })));
+    setDraftTimes(item.times.map((t) => ({ ...t })));
+    setIsEditing(false);
+  }
+
+  async function saveEdit() {
+    setSaving(true);
+    try {
+      const existing_topic_ids = draftTopics
+        .filter((t) => t.type === "existing")
+        .map((t) => t.id);
+
+      const new_topics = draftTopics
+        .filter((t) => t.type === "new")
+        .map((t) => ({
+          name: t.name,
+          color_hex: t.color_hex,
+        }));
+
+      const response = await fetch(
+        `http://localhost:8000/api/planner/tasks/${item.id}/`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            name: draftName,
+            description: draftDescription,
+            completed: item.completed,
+            existing_topic_ids: existing_topic_ids,
+            new_topics: new_topics,
+            times: draftTimes,
+          }),
+        },
+      );
+      if (!response.ok) {
+        throw new Error("Failed to update task");
+      }
+      const updatedItem = await response.json();
+      onUpdate(updatedItem);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Error saving task:", error);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  {
+    /* Item Display */
+  }
+  return (
+    <div className="m-1 flex w-96 flex-col rounded-md border-2 border-zinc-200 bg-zinc-700 p-2">
+      <div className="flex items-center justify-between">
+        {/* Task Name and Completion */}
+        <div className="flex items-center space-x-2">
+          <input
+            type="checkbox"
+            checked={item.completed}
+            onChange={() => onToggle?.(item.id)}
+            className="w-xl h-xl accent-zinc-600"
+          />
+          {isEditing ? (
+            <input
+              value={draftName}
+              onChange={(e) => setDraftName(e.target.value)}
+              className="rounded border-2 bg-zinc-600 p-1 text-zinc-200"
+            />
+          ) : (
+            <span
+              className={
+                item.completed ? "text-zinc-400 line-through" : "text-zinc-300"
+              }
+            >
+              {item.name}
+            </span>
+          )}
+        </div>
+
+        {/* Task Times */}
+        <div className="flex flex-col items-end text-sm text-zinc-300">
+          {isEditing ? (
+            <TimeInput times={draftTimes} setTimes={setDraftTimes} />
+          ) : item.times?.length > 0 ? (
+            item.times.map((t) => (
+              <span key={t.id}>
+                {formatDay(t.day)} {t.start_time.slice(0, 5)} -{" "}
+                {t.end_time.slice(0, 5)}
+              </span>
+            ))
+          ) : (
+            "No time set"
+          )}
+        </div>
+      </div>
+
+      {/* Task Topics */}
+      <div className="flex flex-wrap gap-1 text-sm text-zinc-300">
+        {isEditing ? (
+          <TopicInput
+            availableTopics={availableTopics}
+            topics={draftTopics}
+            setTopics={setDraftTopics}
+          />
+        ) : item.topics.length > 0 ? (
+          item.topics.map((topic) => (
+            <span
+              key={topic.id}
+              className="flex items-center gap-1 rounded-lg border-2 border-zinc-500 px-2 py-0.5 text-zinc-100"
+            >
+              <span
+                className="h-2 w-2 rounded-full"
+                style={{
+                  backgroundColor: `#${topic.color_hex
+                    .toString(16)
+                    .padStart(6, "0")}`,
+                }}
+              />
+              {topic.name}
+            </span>
+          ))
+        ) : (
+          "No topics"
+        )}
+      </div>
+
+      {/* Task Description */}
+      <div>
+        {isEditing ? (
+          <textarea
+            value={draftDescription}
+            onChange={(e) => setDraftDescription(e.target.value)}
+            className="mt-2 w-full rounded border-2 bg-zinc-600 p-1 text-zinc-200"
+          />
+        ) : item.description ? (
+          <span className="mt-2 block text-zinc-300">{item.description}</span>
+        ) : (
+          <span className="mt-2 block italic text-zinc-500">
+            No description.
+          </span>
+        )}
+      </div>
+      <div className="mt-2 flex gap-2">
+        {isEditing ? (
+          <>
+            <button onClick={saveEdit} disabled={saving}>
+              Save
+            </button>
+            <button onClick={cancelEdit}>Cancel</button>
+          </>
+        ) : (
+          <button onClick={startEdit}>Edit</button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatDay(day: number): string {
+  const days = [
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+    "Sunday",
+  ];
+  return days[day - 1] || "Unknown";
+}
diff --git a/client/src/components/task_list.tsx b/client/src/components/task_list.tsx
new file mode 100644
index 0000000..17827c4
--- /dev/null
+++ b/client/src/components/task_list.tsx
@@ -0,0 +1,62 @@
+import { TaskItem } from "./task_item";
+
+interface Time {
+  id: number;
+  day: number;
+  start_time: string;
+  end_time: string;
+  repeating: boolean;
+}
+
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
+interface Item {
+  id: number;
+  name: string;
+  completed: boolean;
+  description: string;
+  times: Time[];
+  topics: Topic[];
+}
+
+type ListProps = {
+  items: Item[];
+  onToggleTask?: (id: number) => void;
+  onUpdate: (item: Item) => void;
+  availableTopics: Topic[];
+};
+
+export function TaskList({
+  items,
+  onToggleTask,
+  onUpdate,
+  availableTopics,
+}: ListProps) {
+  if (items.length === 0) {
+    return (
+      <div>
+        <p className="text-center text-zinc-300">No tasks available.</p>
+      </div>
+    );
+  }
+  return (
+    <div className="mx-auto h-[79vh] w-full max-w-md overflow-y-auto p-2">
+      <ul className="space-y-2">
+        {items.map((item) => (
+          <li key={item.id}>
+            <TaskItem
+              item={item}
+              onToggle={onToggleTask}
+              onUpdate={onUpdate}
+              availableTopics={availableTopics}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/client/src/components/time_input.tsx b/client/src/components/time_input.tsx
new file mode 100644
index 0000000..30eb937
--- /dev/null
+++ b/client/src/components/time_input.tsx
@@ -0,0 +1,91 @@
+interface Time {
+  id: number;
+  day: number;
+  start_time: string;
+  end_time: string;
+  repeating: boolean;
+}
+
+interface TimeInputProps {
+  times: Time[];
+  setTimes: (times: Time[]) => void;
+}
+
+const daysOfWeek = [
+  { label: "Mon", value: 1 },
+  { label: "Tue", value: 2 },
+  { label: "Wed", value: 3 },
+  { label: "Thu", value: 4 },
+  { label: "Fri", value: 5 },
+  { label: "Sat", value: 6 },
+  { label: "Sun", value: 7 },
+];
+
+export function TimeInput({ times, setTimes }: TimeInputProps) {
+  return (
+    <div>
+      {times.map((time, index) => (
+        <div key={index}>
+          <select
+            value={time.day}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].day = parseInt(e.target.value);
+              setTimes(newTimes);
+            }}
+          >
+            {daysOfWeek.map((day) => (
+              <option key={day.value} value={day.value}>
+                {day.label}
+              </option>
+            ))}
+          </select>
+          <input
+            type="time"
+            value={time.start_time}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].start_time = e.target.value;
+              setTimes(newTimes);
+            }}
+          />
+          <input
+            type="time"
+            value={time.end_time}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].end_time = e.target.value;
+              setTimes(newTimes);
+            }}
+          />
+          <input
+            type="checkbox"
+            checked={time.repeating}
+            onChange={(e) => {
+              const newTimes = [...times];
+              newTimes[index].repeating = e.target.checked;
+              setTimes(newTimes);
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => setTimes(times.filter((_, i) => i !== index))}
+          >
+            Remove
+          </button>
+        </div>
+      ))}
+      <button
+        type="button"
+        onClick={() =>
+          setTimes([
+            ...times,
+            { id: 0, day: 1, start_time: "", end_time: "", repeating: false },
+          ])
+        }
+      >
+        Add Time
+      </button>
+    </div>
+  );
+}
diff --git a/client/src/components/topic_input.tsx b/client/src/components/topic_input.tsx
new file mode 100644
index 0000000..c6a58a6
--- /dev/null
+++ b/client/src/components/topic_input.tsx
@@ -0,0 +1,110 @@
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
+type TopicSelection =
+  | { type: "existing"; id: number }
+  | { type: "new"; name: string; color_hex: number };
+
+interface TopicInputProps {
+  availableTopics: Topic[];
+  topics: TopicSelection[];
+  setTopics: React.Dispatch<React.SetStateAction<TopicSelection[]>>;
+}
+
+export function TopicInput({
+  availableTopics,
+  topics,
+  setTopics,
+}: TopicInputProps) {
+  return (
+    <div className="mb-4">
+      {/* Existing Topic Selection */}
+      <select
+        className="w-full rounded border-2 bg-zinc-700 p-2 text-zinc-200"
+        onChange={(e) => {
+          const id = Number(e.target.value);
+          if (!id) return;
+          if (!topics.some((t) => t.type === "existing" && t.id === id)) {
+            setTopics([...topics, { type: "existing", id }]);
+          }
+          e.target.value = "";
+        }}
+      >
+        <option value="">Select Existing Topic</option>
+        {availableTopics.map((topic) => (
+          <option key={topic.id} value={topic.id}>
+            {topic.name}
+          </option>
+        ))}
+      </select>
+
+      {/* Selected Topics Display */}
+      {topics.map((topic, index) => {
+        if (topic.type === "existing") {
+          const topicData = availableTopics.find((t) => t.id === topic.id);
+          if (!topicData) return null;
+          return (
+            <div
+              key={index}
+              className="mt-2 flex items-center justify-between rounded bg-zinc-600 p-2 text-zinc-200"
+            >
+              <span>{topicData.name}</span>
+              <button
+                type="button"
+                onClick={() => setTopics(topics.filter((_, i) => i !== index))}
+                className="text-red-500 hover:text-red-700"
+              >
+                Remove
+              </button>
+            </div>
+          );
+        }
+
+        return (
+          <div key={index} className="mt-2 flex items-center gap-2">
+            <input
+              type="text"
+              placeholder="New Topic Name"
+              value={topic.name}
+              onChange={(e) => {
+                const newTopics = [...topics];
+                newTopics[index] = { ...topic, name: e.target.value };
+                setTopics(newTopics);
+              }}
+            />
+            <input
+              type="color"
+              value={`#${topic.color_hex.toString(16).padStart(6, "0")}`}
+              onChange={(e) => {
+                const hex = parseInt(e.target.value.replace("#", ""), 16);
+                const copy = [...topics];
+                copy[index] = { ...topic, color_hex: hex };
+                setTopics(copy);
+              }}
+            />
+            <button
+              type="button"
+              onClick={() => setTopics(topics.filter((_, i) => i !== index))}
+              className="text-red-500 hover:text-red-700"
+            >
+              Remove
+            </button>
+          </div>
+        );
+      })}
+
+      <button
+        type="button"
+        className="mt-3 rounded bg-green-700 px-2 py-1 text-zinc-200"
+        onClick={() =>
+          setTopics([...topics, { type: "new", name: "", color_hex: 0xffffff }])
+        }
+      >
+        + Create New Topic
+      </button>
+    </div>
+  );
+}
diff --git a/client/src/pages/[id]/tasks.tsx b/client/src/pages/[id]/tasks.tsx
new file mode 100644
index 0000000..fc8f329
--- /dev/null
+++ b/client/src/pages/[id]/tasks.tsx
@@ -0,0 +1,123 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import { TaskForm } from "@/components/task_form";
+import { TaskList } from "@/components/task_list";
+
+interface Time {
+  id: number;
+  day: number;
+  start_time: string;
+  end_time: string;
+  repeating: boolean;
+}
+
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
+interface Item {
+  id: number;
+  name: string;
+  completed: boolean;
+  description: string;
+  times: Time[];
+  topics: Topic[];
+}
+
+export default function TasksPage() {
+  const router = useRouter();
+  const { id } = router.query;
+  const [items, setItems] = useState<Item[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [availableTopics, setAvailableTopics] = useState<Topic[]>([]);
+
+  useEffect(() => {
+    if (!id) return;
+
+    async function fetchTasks() {
+      try {
+        // Remove the query bit when authentication is added.
+        const response = await fetch(
+          `http://localhost:8000/api/planner/tasks/?user_id=${id}`,
+        );
+        const data = await response.json();
+        setItems(data);
+      } catch (err) {
+        console.error("Failed to load tasks:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchTasks();
+  }, [id]);
+
+  useEffect(() => {
+    fetch("http://localhost:8000/api/planner/topic/")
+      .then((res) => res.json())
+      .then((data) => setAvailableTopics(data))
+      .catch((err) => console.error("Failed to load topics", err));
+  }, []);
+
+  if (loading) {
+    return <p>Loading tasks...</p>;
+  }
+
+  const handleTaskCreated = (task: Item) => {
+    setItems((prev) => [...prev, task]);
+  };
+
+  async function handleToggleTask(id: number) {
+    const task = items.find((t) => t.id === id);
+    if (!task) return;
+
+    try {
+      const response = await fetch(
+        `http://localhost:8000/api/planner/tasks/${id}/toggle_complete/`,
+        {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ completed: !task.completed }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to update task");
+      }
+
+      const updatedTask = await response.json();
+
+      setItems((prevItems) =>
+        prevItems.map((item) => (item.id === id ? updatedTask : item)),
+      );
+    } catch (error) {
+      console.error("Error updating task:", error);
+    }
+  }
+
+  function handleTaskUpdated(updated: Item) {
+    setItems((prev) => prev.map((t) => (t.id === updated.id ? updated : t)));
+  }
+
+  return (
+    <div className="container mx-auto flex flex-row items-center justify-center p-4">
+      <div className="m-4 h-fit w-fit rounded-xl bg-zinc-700 p-4 text-center">
+        <h1 className="mb-4 text-3xl font-bold text-zinc-300">Task List</h1>
+        <TaskList
+          items={items}
+          onToggleTask={handleToggleTask}
+          onUpdate={handleTaskUpdated}
+          availableTopics={availableTopics}
+        />
+      </div>
+      <div className="m-4 h-fit w-fit rounded-xl bg-zinc-700 p-4 text-center">
+        <h1 className="mb-4 text-3xl font-bold text-zinc-300">Add Task</h1>
+        <TaskForm userId={Number(id)} onTaskCreated={handleTaskCreated} />
+      </div>
+    </div>
+  );
+}
diff --git a/server/task_planner/migrations/0002_alter_time_task.py b/server/task_planner/migrations/0002_alter_time_task.py
new file mode 100644
index 0000000..eb8b0fd
--- /dev/null
+++ b/server/task_planner/migrations/0002_alter_time_task.py
@@ -0,0 +1,19 @@
+# Generated by Django 5.2.8 on 2025-12-12 15:32
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('task_planner', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='time',
+            name='task',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='times', to='task_planner.task'),
+        ),
+    ]
diff --git a/server/task_planner/migrations/0003_alter_task_topics_alter_time_day_and_more.py b/server/task_planner/migrations/0003_alter_task_topics_alter_time_day_and_more.py
new file mode 100644
index 0000000..7c044d9
--- /dev/null
+++ b/server/task_planner/migrations/0003_alter_task_topics_alter_time_day_and_more.py
@@ -0,0 +1,29 @@
+# Generated by Django 5.2.8 on 2025-12-16 15:42
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('task_planner', '0002_alter_time_task'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='task',
+            name='topics',
+            field=models.ManyToManyField(blank=True, to='task_planner.topic'),
+        ),
+        migrations.AlterField(
+            model_name='time',
+            name='day',
+            field=models.IntegerField(choices=[(1, 'Monday'), (2, 'Tuesday'), (3, 'Wednesday'), (4, 'Thursday'), (5, 'Friday'), (6, 'Saturday'), (7, 'Sunday')], default=1),
+        ),
+        migrations.AlterField(
+            model_name='topic',
+            name='color_hex',
+            field=models.PositiveIntegerField(validators=[django.core.validators.MinValueValidator(0), django.core.validators.MaxValueValidator(16777215)]),
+        ),
+    ]
diff --git a/server/task_planner/models.py b/server/task_planner/models.py
index 6f214fc..4b9fc2c 100644
--- a/server/task_planner/models.py
+++ b/server/task_planner/models.py
@@ -1,14 +1,23 @@
 from django.db import models
 from django.contrib.auth import get_user_model
+from django.core.validators import MinValueValidator, MaxValueValidator
 
 
 # Create your models here.
 User = get_user_model()
 
+class PlannerDay(models.IntegerChoices):
+    MONDAY = 1, "Monday"
+    TUESDAY = 2, "Tuesday"
+    WEDNESDAY = 3, "Wednesday"
+    THURSDAY = 4, "Thursday"
+    FRIDAY = 5, "Friday"
+    SATURDAY = 6, "Saturday"
+    SUNDAY = 7, "Sunday"
 
 class Topic(models.Model):
     name = models.CharField(max_length=255)
-    color_hex = models.PositiveIntegerField()
+    color_hex = models.PositiveIntegerField(validators=[MinValueValidator(0), MaxValueValidator(0xFFFFFF)])
     user = models.ForeignKey(User, on_delete=models.CASCADE)
 
 
@@ -17,11 +26,11 @@ class Task(models.Model):
     description = models.TextField(blank=True)
     completed = models.BooleanField(default=False)
     user = models.ForeignKey(User, on_delete=models.CASCADE)
-    topics = models.ManyToManyField(Topic)
+    topics = models.ManyToManyField(Topic, blank=True)
 
 
 class Time(models.Model):
-    day = models.IntegerField()
+    day = models.IntegerField(choices=PlannerDay.choices, default=PlannerDay.MONDAY)
     start_time = models.TimeField()
     end_time = models.TimeField()
     repeating = models.BooleanField(default=False)
diff --git a/server/task_planner/serializers.py b/server/task_planner/serializers.py
index 0203d07..e77bc4f 100644
--- a/server/task_planner/serializers.py
+++ b/server/task_planner/serializers.py
@@ -1,31 +1,105 @@
 from rest_framework import serializers
+from django.db import transaction
 from .models import Task, Topic, Time
 
 
-class TopicSerializer(serializers.ModelSerializer):
+class TopicReadSerializer(serializers.ModelSerializer):
     class Meta:
         model = Topic
         fields = "__all__"
 
 
-class TimeSerializer(serializers.ModelSerializer):
+class TimeReadSerializer(serializers.ModelSerializer):
     class Meta:
         model = Time
         fields = "__all__"
 
 
-class TaskSerializer(serializers.ModelSerializer):
-    topics = TopicSerializer(many=True, read_only=True)
-    times = TimeSerializer(many=True, read_only=True)
+class TaskReadSerializer(serializers.ModelSerializer):
+    topics = TopicReadSerializer(many=True, read_only=True)
+    times = TimeReadSerializer(many=True, read_only=True)
 
     class Meta:
         model = Task
-        fields = (
-            "id",
-            "name",
-            "description",
-            "completed",
-            "user",
-            "topics",
-            "times",
-        )
+        fields = "__all__"
+
+class TopicWriteSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Topic
+        fields = ["name", "color_hex"]
+
+class TimeWriteSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Time
+        fields = ["day", "start_time", "end_time", "repeating"]
+
+class TaskWriteSerializer(serializers.ModelSerializer):
+    existing_topic_ids = serializers.PrimaryKeyRelatedField(
+        many=True, queryset=Topic.objects.all(), write_only=True, required=False
+    )
+    new_topics = TopicWriteSerializer(many=True, write_only=True, required=False)
+    times = TimeWriteSerializer(many=True,  required=False)
+
+    class Meta:
+        model = Task
+        fields = ["name", "description", "completed", "existing_topic_ids", "new_topics", "times"]
+
+    @transaction.atomic
+    def create(self, validated_data):
+        user_id = validated_data.pop("user_id", None)
+        existing_topics = validated_data.pop("existing_topic_ids", [])
+        new_topics_data = validated_data.pop("new_topics", [])
+        times_data = validated_data.pop("times", [])
+
+        task = Task.objects.create(**validated_data, user_id=user_id)
+
+        for topic in existing_topics:
+            task.topics.add(topic)
+
+        for topic_data in new_topics_data:
+            topic = Topic.objects.create(**topic_data, user_id=user_id)
+            task.topics.add(topic)
+
+        Time.objects.bulk_create([
+            Time(task=task, **time_data)
+            for time_data in times_data
+        ])
+
+        task.save()
+        task.refresh_from_db()
+        return Task.objects.get(id=task.id)
+    
+    @transaction.atomic
+    def update(self, instance, validated_data):
+        existing_topics = validated_data.pop("existing_topic_ids", [])
+        new_topics_data = validated_data.pop("new_topics", [])
+        times_data = validated_data.pop("times", [])
+
+        for attr, value in validated_data.items():
+            setattr(instance, attr, value)
+        instance.save()
+
+        if existing_topics or new_topics_data:
+            instance.topics.clear()
+            for topic in existing_topics:
+                instance.topics.add(topic)
+            for topic_data in new_topics_data:
+                topic = Topic.objects.create(**topic_data, user_id=instance.user_id)
+                instance.topics.add(topic)
+        
+        if times_data is not None:
+            instance.times.all().delete()
+            Time.objects.bulk_create([
+                Time(task=instance, **time_data)
+                for time_data in times_data
+            ])
+        
+
+        instance.save()
+        instance.refresh_from_db()
+        return Task.objects.get(id=instance.id)
+
+class TaskCompleteSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Task
+        fields = ["completed"]
\ No newline at end of file
diff --git a/server/task_planner/urls.py b/server/task_planner/urls.py
index 070e600..694537e 100644
--- a/server/task_planner/urls.py
+++ b/server/task_planner/urls.py
@@ -4,7 +4,9 @@
 
 app_name = "task_planner"
 urlpatterns = [
-    path("task/", views.TaskList.as_view(), name="task-list"),
     path("topic/", views.TopicList.as_view(), name="topic-list"),
     path("time/", views.TimeList.as_view(), name="time-list"),
+    path("tasks/", views.TaskViewSet.as_view({'get': 'list', 'post': 'create'}), name="task-viewset"),
+    path("tasks/<int:pk>/", views.TaskViewSet.as_view({'get': 'retrieve', 'put': 'update', 'delete': 'destroy'}), name="task-detail"),
+    path("tasks/<int:pk>/toggle_complete/", views.TaskViewSet.as_view({'patch': 'toggle_complete'}), name="task-toggle-complete"),
 ]
diff --git a/server/task_planner/views.py b/server/task_planner/views.py
index f679995..2fff80d 100644
--- a/server/task_planner/views.py
+++ b/server/task_planner/views.py
@@ -1,30 +1,94 @@
 from django.shortcuts import render
 
 # from rest_framework import generics, permissions
+from rest_framework.exceptions import ValidationError
 from rest_framework.response import Response
 from rest_framework.views import APIView
+from rest_framework.viewsets import ModelViewSet
+from rest_framework import status
+from rest_framework.decorators import action
+#from rest_framework.permissions import IsAuthenticated
 
 from .models import Task, Topic, Time
-from .serializers import TaskSerializer, TopicSerializer, TimeSerializer
+from .serializers import TaskReadSerializer, TaskWriteSerializer, TopicReadSerializer, TimeReadSerializer, TaskCompleteSerializer
 
 
 # Create your views here.
-class TaskList(APIView):
-    def get(self, request):
-        tasks = Task.objects.all()
-        serializer = TaskSerializer(tasks, many=True)
-        return Response(serializer.data)
-
 
 class TopicList(APIView):
     def get(self, request):
         topics = Topic.objects.all()
-        serializer = TopicSerializer(topics, many=True)
+        serializer = TopicReadSerializer(topics, many=True)
         return Response(serializer.data)
 
 
 class TimeList(APIView):
     def get(self, request):
         times = Time.objects.all()
-        serializer = TimeSerializer(times, many=True)
+        serializer = TimeReadSerializer(times, many=True)
         return Response(serializer.data)
+
+class TaskViewSet(ModelViewSet):
+
+    #permission_classes = [IsAuthenticated]  # Uncomment when authentication is added.
+
+    def get_serializer_class(self):
+        if self.action in ['list', 'retrieve']:
+            return TaskReadSerializer
+        return TaskWriteSerializer
+
+    def get_queryset(self):
+        # -- Temporary Code --
+        user_id = self.request.query_params.get('user_id')
+        if user_id:
+            return Task.objects.filter(user_id=user_id)
+        # -- End Temporary Code --
+        
+        #return Task.objects.filter(user=self.request.user) # Will restrict tasks to a given user when authentication is added.
+        return Task.objects.all()
+    
+    def perform_create(self, serializer):
+        # Use explicit user_id when provided (no auth yet); otherwise require auth
+        user_id = self.request.data.get("user_id")
+        if user_id:
+            serializer.save(user_id=user_id)
+            return
+        if self.request.user and self.request.user.is_authenticated:
+            serializer.save(user=self.request.user)
+            return
+        raise ValidationError({"user_id": "Provide user_id or authenticate."})
+    
+    def create(self, request, *args, **kwargs):
+        write_serializer = TaskWriteSerializer(data=request.data)
+        write_serializer.is_valid(raise_exception=True)
+
+        user_id = request.data.get("user_id")
+        if user_id:
+            task = write_serializer.save(user_id=user_id)
+        elif request.user and request.user.is_authenticated:
+            task = write_serializer.save(user=request.user)
+        else:
+            raise ValidationError({"user_id": "Provide user_id or authenticate."})
+
+        read_serializer = TaskReadSerializer(task)
+        return Response(read_serializer.data, status=status.HTTP_201_CREATED)
+    
+    @action(detail=True, methods=['patch'])
+    def toggle_complete(self, request, pk=None):
+        task = self.get_object()
+        serializer = TaskCompleteSerializer(task, data=request.data, partial=True)
+        serializer.is_valid(raise_exception=True)
+        serializer.save()
+        read_serializer = TaskReadSerializer(task)
+        return Response(read_serializer.data)
+    
+    def update(self, request, *args, **kwargs):
+        partial = kwargs.pop('partial', False)
+        instance = self.get_object()
+
+        write_serializer = TaskWriteSerializer(instance, data=request.data, partial=partial)
+        write_serializer.is_valid(raise_exception=True)
+        task = write_serializer.save()
+
+        read_serializer = TaskReadSerializer(task)
+        return Response(read_serializer.data)
\ No newline at end of file