diff --git a/client/package-lock.json b/client/package-lock.json
index 46f7ac1..a81d4bf 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20,6 +20,7 @@
         "next": "15.4.7",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "react-icons": "^5.5.0",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -5750,6 +5751,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/client/package.json b/client/package.json
index ce70203..8bc93bc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -27,6 +27,7 @@
     "next": "15.4.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/client/src/components/task_form.tsx b/client/src/components/task_form.tsx
index 5034c34..868be10 100644
--- a/client/src/components/task_form.tsx
+++ b/client/src/components/task_form.tsx
@@ -93,34 +93,39 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   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"
+      className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-slate-400 p-4 text-slate-200"
     >
       <input
+        className="title-input w-full rounded-lg bg-slate-400 px-3 py-1 text-3xl font-bold text-slate-100 brightness-90 placeholder:text-slate-300 hover:brightness-110"
         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"
+        placeholder="Task name"
         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} />
+      <div className="description-wrapper flex w-full flex-col items-center">
+        <h1 className="description-input-title text-xl hover:brightness-110">
+          Description
+        </h1>
+        <textarea
+          className="description-input w-full rounded-lg bg-slate-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={7}
+          placeholder="Add description here..."
+        />
+      </div>
       <TopicInput
         availableTopics={availableTopics}
         topics={topics}
         setTopics={setTopics}
       />
-
+      <TimeInput times={times} setTimes={setTimes} />
       <button
+        className="w-fit rounded-lg border border-slate-300 bg-slate-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
         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
+        Save
       </button>
     </form>
   );
diff --git a/client/src/components/task_item.tsx b/client/src/components/task_item.tsx
index 8cf8e84..50d6079 100644
--- a/client/src/components/task_item.tsx
+++ b/client/src/components/task_item.tsx
@@ -1,7 +1,11 @@
 import { useState } from "react";
+import { FaRegEdit } from "react-icons/fa";
+import { FaRegTrashCan } from "react-icons/fa6";
 
 import { TimeInput } from "@/components/time_input";
+import TimeTag, { DayTag } from "@/components/time_tag";
 import { TopicInput } from "@/components/topic_input";
+import { TopicTagAlt } from "@/components/topic_tag";
 
 interface Time {
   id: number;
@@ -122,52 +126,61 @@ export function TaskItem({
     /* 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">
+    <div className="task flex h-fit w-full max-w-[48rem] flex-col gap-3 rounded-lg bg-slate-400 p-5 text-slate-200 shadow-xl">
+      <div className="task-title-container flex w-full flex-row items-center justify-start gap-2 text-3xl font-bold text-slate-100 hover:text-slate-100">
         {/* Task Name and Completion */}
-        <div className="flex items-center space-x-2">
+        <input
+          className="task-completion mr-3 accent-slate-300"
+          type="checkbox"
+          checked={item.completed}
+          onChange={() => onToggle?.(item.id)}
+        />
+        {isEditing ? (
           <input
-            type="checkbox"
-            checked={item.completed}
-            onChange={() => onToggle?.(item.id)}
-            className="w-xl h-xl accent-zinc-600"
+            className="task-title-edit w-full rounded-lg bg-slate-400 px-3 py-1 brightness-90 hover:brightness-110"
+            value={draftName}
+            onChange={(e) => setDraftName(e.target.value)}
           />
-          {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"
+                "task-title w-full" + (item.completed ? " line-through" : "")
               }
             >
               {item.name}
             </span>
-          )}
-        </div>
+            <button className="hover:brightness-110" onClick={startEdit}>
+              <FaRegEdit className="h-5 w-5" />
+            </button>
+            <button onClick={() => onDelete(item.id)}>
+              <FaRegTrashCan className="h-5 w-5 hover:text-red-600" />
+            </button>
+          </>
+        )}
+      </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>
+      {/* Task Times */}
+      <div className="task-times-container flex flex-row flex-wrap items-start justify-start gap-y-1">
+        {isEditing ? (
+          <TimeInput times={draftTimes} setTimes={setDraftTimes} />
+        ) : item.times?.length > 0 ? (
+          item.times.map((time) => (
+            <div
+              key={time.id}
+              className="day-time-tags flex w-fit flex-row gap-3 rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+            >
+              <DayTag day={formatDay(time.day)} />
+              <TimeTag start_time={time.start_time} end_time={time.end_time} />
+            </div>
+          ))
+        ) : (
+          "No time set"
+        )}
       </div>
 
       {/* Task Topics */}
-      <div className="flex flex-wrap gap-1 text-sm text-zinc-300">
+      <div className="task-topic-tags flex flex-row flex-wrap gap-1 text-slate-200">
         {isEditing ? (
           <TopicInput
             availableTopics={availableTopics}
@@ -176,20 +189,11 @@ export function TaskItem({
           />
         ) : item.topics.length > 0 ? (
           item.topics.map((topic) => (
-            <span
+            <TopicTagAlt
               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>
+              name={topic.name}
+              color_hex={topic.color_hex}
+            />
           ))
         ) : (
           "No topics"
@@ -197,52 +201,57 @@ export function TaskItem({
       </div>
 
       {/* Task Description */}
-      <div>
+      <div
+        className="task-description overflow-auto text-justify text-slate-200"
+        style={!isEditing ? { maxHeight: "12rem", scrollbarWidth: "thin" } : {}}
+      >
         {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>
+          <div className="task-description-input-container flex flex-col items-center gap-2">
+            <h1 className="description-input-title text-xl hover:brightness-110">
+              Description
+            </h1>
+            <textarea
+              className="w-full rounded-lg bg-slate-400 p-1 brightness-90 hover:brightness-110"
+              value={draftDescription}
+              rows={7}
+              onChange={(e) => setDraftDescription(e.target.value)}
+            />
+          </div>
         ) : (
-          <span className="mt-2 block italic text-zinc-500">
-            No description.
+          <span className="block hover:brightness-110">
+            {item.description ? item.description : "No Description"}
           </span>
         )}
       </div>
 
       {/* Edit Button */}
-      <div className="mt-2 flex gap-2">
+
+      <div className="task-edit flex gap-2">
         {isEditing ? (
-          <>
-            <button onClick={saveEdit} disabled={saving}>
+          <div className="flex w-full flex-row justify-center text-lg">
+            <button
+              className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+              onClick={saveEdit}
+              disabled={saving}
+            >
               Save
             </button>
-            <button onClick={cancelEdit}>Cancel</button>
-          </>
+            <button
+              className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+              onClick={cancelEdit}
+            >
+              Cancel
+            </button>
+          </div>
         ) : (
-          <button onClick={startEdit}>Edit</button>
-        )}
-      </div>
-
-      {/* Delete Button */}
-      <div>
-        {!isEditing && (
-          <button
-            onClick={() => onDelete(item.id)}
-            className="mt-2 text-red-500"
-          >
-            Delete Task
-          </button>
+          <></>
         )}
       </div>
     </div>
   );
 }
 
-function formatDay(day: number): string {
+export function formatDay(day: number): string {
   const days = [
     "Monday",
     "Tuesday",
diff --git a/client/src/components/task_list.tsx b/client/src/components/task_list.tsx
index f9edc08..5d20f44 100644
--- a/client/src/components/task_list.tsx
+++ b/client/src/components/task_list.tsx
@@ -41,25 +41,23 @@ export function TaskList({
   if (items.length === 0) {
     return (
       <div>
-        <p className="text-center text-zinc-300">No tasks available.</p>
+        <p className="text-center text-slate-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}
-              onDelete={onDelete}
-              availableTopics={availableTopics}
-            />
-          </li>
-        ))}
-      </ul>
-    </div>
+    <ul className="task-list h-fit space-y-3">
+      {items.map((item) => (
+        <li key={item.id}>
+          <TaskItem
+            item={item}
+            onToggle={onToggleTask}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+            availableTopics={availableTopics}
+          />
+        </li>
+      ))}
+    </ul>
   );
 }
diff --git a/client/src/components/time_input.tsx b/client/src/components/time_input.tsx
index 30eb937..15d9470 100644
--- a/client/src/components/time_input.tsx
+++ b/client/src/components/time_input.tsx
@@ -1,3 +1,6 @@
+import { FaRegCalendarAlt,FaRegClock } from "react-icons/fa";
+import { FaRegTrashCan } from "react-icons/fa6";
+
 interface Time {
   id: number;
   day: number;
@@ -23,59 +26,80 @@ const daysOfWeek = [
 
 export function TimeInput({ times, setTimes }: TimeInputProps) {
   return (
-    <div>
+    <div className="text-md flex w-full flex-col items-center justify-center gap-2">
+      <h1 className="time-input-title text-xl hover:brightness-110">Times</h1>
       {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);
-            }}
-          />
+        <div
+          key={index}
+          className="time-input-wrapper flex w-full flex-row items-center justify-evenly gap-1 rounded-lg bg-slate-400 p-1 brightness-90 hover:brightness-95"
+        >
+          <div className="day-select-wrapper flex w-[20%] flex-row items-center justify-center gap-1">
+            <FaRegCalendarAlt />
+            <select
+              className="day-select h-full rounded-lg bg-slate-400 p-1 text-center hover:brightness-110"
+              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>
+          </div>
+          <div className="time-select-wrapper flex w-[35%] flex-row items-center justify-center gap-1">
+            <FaRegClock />
+            <div className="time-inputs-wrapper text-md flex flex-col">
+              <input
+                className="time-input h-full rounded-lg bg-slate-400 hover:brightness-110"
+                type="time"
+                value={time.start_time}
+                onChange={(e) => {
+                  const newTimes = [...times];
+                  newTimes[index].start_time = e.target.value;
+                  setTimes(newTimes);
+                }}
+              />
+              <input
+                className="time-input h-full rounded-lg bg-slate-400 hover:brightness-110"
+                type="time"
+                value={time.end_time}
+                onChange={(e) => {
+                  const newTimes = [...times];
+                  newTimes[index].end_time = e.target.value;
+                  setTimes(newTimes);
+                }}
+              />
+            </div>
+          </div>
+          <div className="repeat-input-wrapper flex w-[25%] flex-row gap-2 rounded-lg bg-slate-400 p-1 hover:brightness-110">
+            <span>Repeats?</span>
+            <input
+              className="repeat-input"
+              type="checkbox"
+              checked={time.repeating}
+              onChange={(e) => {
+                const newTimes = [...times];
+                newTimes[index].repeating = e.target.checked;
+                setTimes(newTimes);
+              }}
+            />
+          </div>
           <button
+            className="time-delete"
             type="button"
             onClick={() => setTimes(times.filter((_, i) => i !== index))}
           >
-            Remove
+            <FaRegTrashCan className="hover:text-red-500" />
           </button>
         </div>
       ))}
       <button
+        className="add-time-button w-12 rounded-full bg-slate-400 text-xl hover:brightness-110"
         type="button"
         onClick={() =>
           setTimes([
@@ -84,7 +108,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
           ])
         }
       >
-        Add Time
+        +
       </button>
     </div>
   );
diff --git a/client/src/components/time_tag.tsx b/client/src/components/time_tag.tsx
index f010aa1..77a09b4 100644
--- a/client/src/components/time_tag.tsx
+++ b/client/src/components/time_tag.tsx
@@ -1,3 +1,5 @@
+import { FaRegCalendarAlt,FaRegClock } from "react-icons/fa";
+
 import { getDurationMinutes } from "@/components/timetable";
 
 /*
@@ -14,10 +16,13 @@ interface TimeTagProps {
 }
 
 /*
-A small round tag containing a clock icon and either the start and end times,
-the duration, or both, specified by the display prop.
+Returns a string describing the time component of a TimeTag.
 */
-function TimeTag({ start_time, end_time, display }: TimeTagProps) {
+function getTimeDisplayString(
+  start_time: string,
+  end_time: string,
+  display?: string,
+) {
   const time_string =
     start_time.substring(0, 5) + "-" + end_time.substring(0, 5);
 
@@ -33,16 +38,38 @@ function TimeTag({ start_time, end_time, display }: TimeTagProps) {
     else if (display == "both") display_string += " (" + duration_string + ")";
   }
 
+  return display_string;
+}
+
+/*
+A small round tag containing a clock icon and either the start and end times,
+the duration, or both, specified by the display prop.
+*/
+function TimeTag({ start_time, end_time, display }: TimeTagProps) {
+  const time_display_string = getTimeDisplayString(
+    start_time,
+    end_time,
+    display,
+  );
   return (
-    <div
-      className={
-        "flex h-fit w-fit flex-row items-center justify-center rounded-full text-lg font-medium"
-      }
-    >
-      <div className="placeholder-clock aspect-1/1 h-5 w-5 rounded-[50] bg-slate-200"></div>
-      <p className="ml-1">{display_string}</p>
+    <div className="flex h-fit w-fit flex-row items-center justify-center gap-1 rounded-full">
+      <FaRegClock />
+      <p className="hover:brightness-110">{time_display_string}</p>
     </div>
   );
 }
 
 export default TimeTag;
+
+interface DayTagProps {
+  day: string;
+}
+
+export function DayTag({ day }: DayTagProps) {
+  return (
+    <div className="flex h-fit w-fit flex-row items-center justify-center gap-1 rounded-full">
+      <FaRegCalendarAlt />
+      <p className="hover:brightness-110">{day}</p>
+    </div>
+  );
+}
diff --git a/client/src/components/timetable_slot.tsx b/client/src/components/timetable_slot.tsx
index 027799b..f1da707 100644
--- a/client/src/components/timetable_slot.tsx
+++ b/client/src/components/timetable_slot.tsx
@@ -47,7 +47,7 @@ function TimetableSlot({
   }
 
   if (header !== true && time_label !== true) {
-    class_name += " hover:bg-slate-500";
+    class_name += " hover:brightness-125";
   }
 
   // There's probably a better way to do this
@@ -76,9 +76,9 @@ export function TimetableHeader({ label }: TimetableSlotProps) {
   return (
     <div
       id={label + "-header"}
-      className="timetable-header absolute z-[200] flex min-h-16 min-w-32 items-center justify-center border-b-2 border-b-slate-900 bg-slate-800"
+      className="timetable-header absolute z-[200] flex min-h-16 min-w-32 select-none items-center justify-center border-b-2 border-b-slate-900 bg-slate-800 text-slate-300"
     >
-      <p className="text-xl font-semibold text-slate-400">{label}</p>
+      <p className="text-xl font-semibold">{label}</p>
     </div>
   );
 }
diff --git a/client/src/components/timetable_task.tsx b/client/src/components/timetable_task.tsx
index 2dcac54..ee23336 100644
--- a/client/src/components/timetable_task.tsx
+++ b/client/src/components/timetable_task.tsx
@@ -189,13 +189,17 @@ function TimetableTaskContent({
 }: TimetableTaskContentProps) {
   return (
     <div className="timetable-task-content h-full overflow-hidden">
-      <h1 className="mb-1 text-2xl font-bold">{name}</h1>
-      <TimeTag
-        start_time={start_time}
-        end_time={end_time}
-        display={time_display}
-      />
-      <div className="topic-tags mt-2 flex flex-row flex-wrap justify-between text-slate-200">
+      <h1 className="mb-1 text-2xl font-bold text-slate-100 hover:brightness-110">
+        {name}
+      </h1>
+      <div className="time-tag-wrapper text-lg font-medium text-slate-200">
+        <TimeTag
+          start_time={start_time}
+          end_time={end_time}
+          display={time_display}
+        />
+      </div>
+      <div className="topic-tags mb-2 mt-2 flex flex-row flex-wrap gap-1">
         {topics?.map((topic) => (
           <TopicTag
             key={topic.name}
@@ -204,8 +208,8 @@ function TimetableTaskContent({
           />
         ))}
       </div>
-      <div className="description mt-1 flex flex-col text-slate-200">
-        <p className="">{description}</p>
+      <div className="description mt-1 flex flex-col text-justify">
+        <p className="text-slate-300 hover:brightness-110">{description}</p>
       </div>
     </div>
   );
@@ -273,9 +277,9 @@ function TimetableTask({
   }
 
   if (clash === true) {
-    additional_style += "bg-slate-700 hover:bg-slate-500 ";
+    additional_style += "bg-slate-700 ";
   } else {
-    additional_style += "bg-slate-400 hover:bg-slate-300 ";
+    additional_style += "bg-slate-400 ";
   }
 
   const mouseOverHandler = () => {
@@ -295,7 +299,7 @@ function TimetableTask({
       <div
         id={id}
         className={
-          "timetable-task pointer-events-auto absolute z-[50] overflow-hidden rounded-lg p-3 text-slate-100" +
+          "timetable-task pointer-events-auto absolute z-[50] overflow-hidden rounded-lg p-3 hover:brightness-110 " +
           additional_style
         }
         data-completed={completed}
@@ -324,7 +328,10 @@ function TimetableTask({
         onMouseOver={mouseOverHandler}
         onMouseOut={mouseOutHandler}
       >
-        <div className="tooltip-content-container flex h-full w-full flex-col gap-3 overflow-auto">
+        <div
+          className="tooltip-content-container flex h-full w-full flex-col gap-3 overflow-auto"
+          style={{ scrollbarWidth: "thin" }}
+        >
           {tooltip_props.map((props) => (
             <div
               key={id + "-tooltip-" + props.name}
diff --git a/client/src/components/topic_input.tsx b/client/src/components/topic_input.tsx
index c6a58a6..153c677 100644
--- a/client/src/components/topic_input.tsx
+++ b/client/src/components/topic_input.tsx
@@ -1,3 +1,8 @@
+import { FaRegTrashCan } from "react-icons/fa6";
+import { RxCross2 } from "react-icons/rx";
+
+import { TopicTagAlt } from "@/components/topic_tag";
+
 interface Topic {
   id: number;
   name: string;
@@ -20,10 +25,76 @@ export function TopicInput({
   setTopics,
 }: TopicInputProps) {
   return (
-    <div className="mb-4">
+    <div className="topic-input flex w-full flex-col items-center justify-center gap-2 text-slate-200">
+      <h1 className="topic-input-title text-xl hover:brightness-110">Topics</h1>
+      {/* Selected Topics Display */}
+      <div className="topics-container flex w-full flex-row flex-wrap items-center justify-start gap-2">
+        {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="flex w-fit flex-row gap-2 rounded-lg">
+                <TopicTagAlt
+                  name={topicData.name}
+                  color_hex={topicData.color_hex}
+                />
+                <button
+                  className="hover:brightness-90"
+                  type="button"
+                  onClick={() =>
+                    setTopics(topics.filter((_, i) => i !== index))
+                  }
+                >
+                  <RxCross2 className="hover:text-red-500" />
+                </button>
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={index}
+              className="new-topic-input flex w-full flex-row justify-evenly gap-2 rounded-lg bg-slate-400 p-2 brightness-90 hover:brightness-95"
+            >
+              <input
+                className="color-select h-5 w-5 border-0"
+                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);
+                }}
+              />
+              <input
+                className="topic-name-input w-[75%] bg-slate-400 text-justify placeholder:text-slate-300 hover:brightness-110"
+                type="text"
+                placeholder="Topic name..."
+                value={topic.name}
+                onChange={(e) => {
+                  const newTopics = [...topics];
+                  newTopics[index] = { ...topic, name: e.target.value };
+                  setTopics(newTopics);
+                }}
+              />
+
+              <button
+                className="hover:brightness-90"
+                type="button"
+                onClick={() => setTopics(topics.filter((_, i) => i !== index))}
+              >
+                <FaRegTrashCan className="hover:text-red-500" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
       {/* Existing Topic Selection */}
       <select
-        className="w-full rounded border-2 bg-zinc-700 p-2 text-zinc-200"
+        className="topic-select w-full rounded-lg bg-slate-400 p-2 text-center brightness-90 hover:brightness-110"
         onChange={(e) => {
           const id = Number(e.target.value);
           if (!id) return;
@@ -33,7 +104,7 @@ export function TopicInput({
           e.target.value = "";
         }}
       >
-        <option value="">Select Existing Topic</option>
+        <option value="">Add Existing Topic</option>
         {availableTopics.map((topic) => (
           <option key={topic.id} value={topic.id}>
             {topic.name}
@@ -41,69 +112,14 @@ export function TopicInput({
         ))}
       </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"
+        className="add-topic-button w-12 rounded-full bg-slate-400 text-xl hover:brightness-110"
         onClick={() =>
           setTopics([...topics, { type: "new", name: "", color_hex: 0xffffff }])
         }
       >
-        + Create New Topic
+        +
       </button>
     </div>
   );
diff --git a/client/src/components/topic_tag.tsx b/client/src/components/topic_tag.tsx
index 17446b1..b4e8bff 100644
--- a/client/src/components/topic_tag.tsx
+++ b/client/src/components/topic_tag.tsx
@@ -13,19 +13,60 @@ A small rounded label containing the topic's name and a circle of the colour
 stored in color_hex.
 */
 function TopicTag({ name, color_hex }: TopicTagProps) {
-  const bg_color = "#" + color_hex.toString(16).padStart(6, "0");
-
+  const color_hex_code = "#" + color_hex.toString(16).padStart(6, "0");
   return (
-    <div className="mb-1 flex w-fit flex-row items-center overflow-hidden rounded-full bg-slate-500/50 p-1 pl-2 pr-2 text-sm">
+    <div className="topic-tag flex w-fit flex-row items-center overflow-hidden rounded-full bg-slate-500/50 p-1 pl-2 pr-2 text-sm text-slate-300 hover:brightness-110">
       <div
-        className="aspect-1/1 mr-1 min-h-2 min-w-2 rounded-full"
-        style={{ backgroundColor: bg_color }}
-      >
-        {" "}
-      </div>
-      <p className="truncate">{name}</p>
+        className="topic-tag-color aspect-1/1 mr-1 min-h-2 min-w-2 rounded-full"
+        style={{ backgroundColor: color_hex_code }}
+      ></div>
+      <p className="topic-tag-text truncate">{name}</p>
     </div>
   );
 }
 
 export default TopicTag;
+
+function getHexColorValues(hex: string) {
+  const r = parseInt(hex.substring(1, 3), 16);
+  const g = parseInt(hex.substring(3, 5), 16);
+  const b = parseInt(hex.substring(5, 7), 16);
+
+  return { r: r, g: g, b: b };
+}
+
+function modifyBrightness(hex: string, brightness: number): string {
+  const { r, g, b } = getHexColorValues(hex);
+
+  const brightness_modifier = Math.floor((256 * (brightness - 100)) / 100);
+
+  const new_r = Math.min(255, Math.max(0, r + brightness_modifier));
+  const new_g = Math.min(255, Math.max(0, g + brightness_modifier));
+  const new_b = Math.min(255, Math.max(0, b + brightness_modifier));
+
+  const r_str = new_r.toString(16).padStart(2, "0");
+  const g_str = new_g.toString(16).padStart(2, "0");
+  const b_str = new_b.toString(16).padStart(2, "0");
+
+  return "#" + r_str + g_str + b_str;
+}
+
+export function TopicTagAlt({ name, color_hex }: TopicTagProps) {
+  const color_hex_code = "#" + color_hex.toString(16).padStart(6, "0");
+
+  const foreground_hex_code = modifyBrightness(color_hex_code, 125);
+  const background_hex_code = modifyBrightness(color_hex_code, 60);
+
+  return (
+    <div
+      className="topic-tag flex w-fit flex-row items-center overflow-hidden rounded-full border px-2 py-1 text-sm hover:brightness-110"
+      style={{
+        borderColor: foreground_hex_code,
+        color: foreground_hex_code,
+        backgroundColor: background_hex_code,
+      }}
+    >
+      <p className="topic-tag-text truncate">{name}</p>
+    </div>
+  );
+}
diff --git a/client/src/components/ui/logout.tsx b/client/src/components/ui/logout.tsx
index 22d787b..13bdc6c 100644
--- a/client/src/components/ui/logout.tsx
+++ b/client/src/components/ui/logout.tsx
@@ -14,7 +14,7 @@ export function LogoutButton() {
   return (
     <button
       onClick={logout}
-      className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white"
+      className="rounded-md px-3 py-2 text-xl font-bold text-gray-300 hover:bg-white/5 hover:text-white"
     >
       Logout
     </button>
diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx
index 1995d4c..9bd0154 100644
--- a/client/src/components/ui/navbar.tsx
+++ b/client/src/components/ui/navbar.tsx
@@ -10,8 +10,8 @@ export function Navbar() {
 
   const linkClass = (path: string) =>
     pathname === path
-      ? "rounded-md bg-gray-950/50 px-3 py-2 text-sm font-medium text-white"
-      : "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white";
+      ? "rounded-md bg-gray-950/50 px-3 py-2 text-xl font-bold text-white"
+      : "rounded-md px-3 py-2 text-xl font-bold text-gray-300 hover:bg-white/5 hover:text-white";
 
   return (
     <nav className="relative bg-indigo-800 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
diff --git a/client/src/pages/schedule.tsx b/client/src/pages/schedule.tsx
index 8eec7a2..cbba68f 100644
--- a/client/src/pages/schedule.tsx
+++ b/client/src/pages/schedule.tsx
@@ -82,7 +82,7 @@ function Schedule() {
     to be displayed. Sets the timetableTasksProps State variable once finished.
     */
     async function fetchTasks() {
-      const API_URL = "http://localhost:8000/api/planner/task/";
+      const API_URL = "http://localhost:8000/api/planner/tasks/";
       try {
         const response = await fetch(API_URL);
         if (!response.ok) {
@@ -274,8 +274,8 @@ function Schedule() {
   to run in an infinite loop. */
 
   return (
-    <div className="content-container min-w-screen flex h-[85vh] w-full flex-row bg-slate-950">
-      <div className="timetable-container h-[85vh] w-full p-3">
+    <div className="content-container min-w-screen min-h-screen flex w-full flex-row bg-slate-950">
+      <div className="timetable-container max-h-[90vh] w-full p-3">
         <Timetable timetable_tasks_props={timetableTasksProps} />
       </div>
     </div>
diff --git a/client/src/pages/tasks.tsx b/client/src/pages/tasks.tsx
index eaca766..3debb62 100644
--- a/client/src/pages/tasks.tsx
+++ b/client/src/pages/tasks.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { RxCross2, RxPlus } from "react-icons/rx";
 
 import { TaskForm } from "@/components/task_form";
 import { TaskList } from "@/components/task_list";
@@ -34,6 +35,12 @@ export default function TasksPage() {
   const [loading, setLoading] = useState<boolean>(true);
   const [availableTopics, setAvailableTopics] = useState<Topic[]>([]);
 
+  const [showAddTask, setShowAddTask] = useState(false);
+
+  function toggleShowAddTask() {
+    setShowAddTask(!showAddTask);
+  }
+
   useEffect(() => {
     async function fetchData() {
       try {
@@ -42,8 +49,7 @@ export default function TasksPage() {
           router.push("/login"); //redirect to login if unauthorised
           return;
         }
-        const auth = await fetch(
-          "http://localhost:8000/api/planner/protected/",
+        const auth = await fetch( "http://localhost:8000/api/planner/protected/",
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -146,20 +152,57 @@ export default function TasksPage() {
   }
 
   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}
-          onDelete={handleTaskDeleted}
-          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(userId)} onTaskCreated={handleTaskCreated} />
+    <div className="content-container min-w-screen min-h-screen relative flex flex-row items-center justify-center bg-slate-500">
+      <div className="task-list-container h-full w-full">
+        <div className="task-list-content flex h-full w-full flex-col items-center justify-center rounded-lg p-3 text-slate-200">
+          <div className="task-list-top mb-3 hidden h-[10%] w-full rounded-t-lg">
+            <h1 className="task-list-title border-b-2 border-b-slate-400 p-3 text-center text-3xl font-bold text-slate-100">
+              My Tasks
+            </h1>
+          </div>
+          <div className="task-list-bottom flex w-full flex-row justify-center gap-6">
+            <div
+              className="task-list-wrapper flex w-fit flex-row justify-center"
+              style={{ 
+                scrollbarWidth: "thin", 
+                scrollbarColor: "grey white",
+                display: !(showAddTask && items.length === 0) ? "flex" : "none"
+              }}
+            >
+              <TaskList
+                items={items}
+                onToggleTask={handleToggleTask}
+                onUpdate={handleTaskUpdated}
+                onDelete={handleTaskDeleted}
+                availableTopics={availableTopics}
+              />
+            </div>
+            <div
+              className="add-task-container sticky top-3 flex h-full flex-col items-center justify-start rounded-lg bg-slate-400 p-3 shadow-xl"
+              style={{ display: showAddTask ? "flex" : "none" }}
+            >
+              <h1 className="text-3xl font-bold text-slate-100">Add Task</h1>
+              <button
+                className="minimise-add-task-btn absolute right-3 top-3 h-7 w-7 text-lg hover:brightness-110"
+                onClick={toggleShowAddTask}
+              >
+                <RxCross2 />
+              </button>
+              <div className="task-form-wrapper h-full overflow-auto">
+                <TaskForm
+                  userId={Number(userId)}
+                  onTaskCreated={handleTaskCreated}
+                />
+              </div>
+            </div>
+            <button
+              className="toggle-add-task-button fixed bottom-9 right-9 flex h-12 w-12 items-center justify-center rounded-full border bg-slate-400 text-xl brightness-90 hover:brightness-110"
+              onClick={toggleShowAddTask}
+            >
+              {!showAddTask ? <RxPlus /> : <RxCross2 />}
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/package.json
@@ -0,0 +1 @@
+{}