diff --git a/client/src/components/task_form.tsx b/client/src/components/task_form.tsx
index c35a88e..7c6b567 100644
--- a/client/src/components/task_form.tsx
+++ b/client/src/components/task_form.tsx
@@ -101,10 +101,10 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   return (
     <form
       onSubmit={handleSubmit}
-      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"
+      className="task-form flex h-full w-full flex-col items-center justify-between gap-2 rounded-lg bg-slate-900 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"
+        className="title-input w-full rounded-lg bg-indigo-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)}
@@ -116,7 +116,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
           Description
         </h1>
         <textarea
-          className="description-input w-full rounded-lg bg-slate-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
+          className="description-input w-full rounded-lg bg-indigo-400 p-2 brightness-90 placeholder:text-slate-300 hover:brightness-110"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={7}
@@ -130,7 +130,7 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
       />
       <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"
+        className="w-fit rounded-full border border-slate-300 bg-indigo-400 px-3 py-1 text-xl brightness-110 hover:brightness-125"
         type="submit"
       >
         Save
diff --git a/client/src/components/task_item.tsx b/client/src/components/task_item.tsx
index 538fcd0..aff4740 100644
--- a/client/src/components/task_item.tsx
+++ b/client/src/components/task_item.tsx
@@ -132,7 +132,7 @@ export function TaskItem({
     /* Item Display */
   }
   return (
-    <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 flex h-fit w-full min-w-[20rem] max-w-[48rem] flex-col gap-3 rounded-3xl bg-slate-900 p-5 text-slate-200 shadow-xl shadow-black/40">
       <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 */}
         <input
@@ -143,7 +143,7 @@ export function TaskItem({
         />
         {isEditing ? (
           <input
-            className="task-title-edit w-full rounded-lg bg-slate-400 px-3 py-1 brightness-90 hover:brightness-110"
+            className="task-title-edit w-full rounded-lg bg-indigo-400 px-3 py-1 brightness-90 hover:brightness-110"
             value={draftName}
             onChange={(e) => setDraftName(e.target.value)}
           />
@@ -167,14 +167,14 @@ export function TaskItem({
       </div>
 
       {/* Task Times */}
-      <div className="task-times-container flex flex-row flex-wrap items-start justify-start gap-y-1">
+      <div className="task-times-container flex flex-row flex-wrap items-start justify-start gap-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"
+              className="day-time-tags flex w-fit flex-row gap-3 rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
             >
               <DayTag day={formatDay(time.day)} />
               <TimeTag start_time={time.start_time} end_time={time.end_time} />
@@ -217,7 +217,7 @@ export function TaskItem({
               Description
             </h1>
             <textarea
-              className="w-full rounded-lg bg-slate-400 p-1 brightness-90 hover:brightness-110"
+              className="w-full rounded-lg bg-indigo-400 p-1 brightness-90 hover:brightness-110"
               value={draftDescription}
               rows={7}
               onChange={(e) => setDraftDescription(e.target.value)}
@@ -234,16 +234,16 @@ export function TaskItem({
 
       <div className="task-edit flex gap-2">
         {isEditing ? (
-          <div className="flex w-full flex-row justify-center text-lg">
+          <div className="flex w-full flex-row justify-center text-lg gap-2">
             <button
-              className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+              className="rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
               onClick={saveEdit}
               disabled={saving}
             >
               Save
             </button>
             <button
-              className="rounded-full bg-slate-400 px-3 py-1 hover:brightness-110"
+              className="rounded-full bg-indigo-400 px-3 py-1 hover:brightness-110"
               onClick={cancelEdit}
             >
               Cancel
diff --git a/client/src/components/task_list.tsx b/client/src/components/task_list.tsx
index 5d20f44..7ac4c8a 100644
--- a/client/src/components/task_list.tsx
+++ b/client/src/components/task_list.tsx
@@ -46,7 +46,7 @@ export function TaskList({
     );
   }
   return (
-    <ul className="task-list h-fit space-y-3">
+    <ul className="task-list h-fit space-y-3 w-xl">
       {items.map((item) => (
         <li key={item.id}>
           <TaskItem
diff --git a/client/src/components/time_input.tsx b/client/src/components/time_input.tsx
index 15d9470..b560370 100644
--- a/client/src/components/time_input.tsx
+++ b/client/src/components/time_input.tsx
@@ -31,12 +31,12 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
       {times.map((time, index) => (
         <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"
+          className="time-input-wrapper flex w-full flex-row items-center justify-evenly gap-1 rounded-lg bg-indigo-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"
+              className="day-select h-full rounded-lg bg-indigo-400 p-1 text-center hover:brightness-110"
               value={time.day}
               onChange={(e) => {
                 const newTimes = [...times];
@@ -55,7 +55,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
             <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"
+                className="time-input h-full rounded-lg bg-indigo-400 hover:brightness-110"
                 type="time"
                 value={time.start_time}
                 onChange={(e) => {
@@ -65,7 +65,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
                 }}
               />
               <input
-                className="time-input h-full rounded-lg bg-slate-400 hover:brightness-110"
+                className="time-input h-full rounded-lg bg-indigo-400 hover:brightness-110"
                 type="time"
                 value={time.end_time}
                 onChange={(e) => {
@@ -76,7 +76,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
               />
             </div>
           </div>
-          <div className="repeat-input-wrapper flex w-[25%] flex-row gap-2 rounded-lg bg-slate-400 p-1 hover:brightness-110">
+          <div className="repeat-input-wrapper flex w-[25%] flex-row gap-2 rounded-lg bg-indigo-400 p-1 hover:brightness-110">
             <span>Repeats?</span>
             <input
               className="repeat-input"
@@ -99,7 +99,7 @@ export function TimeInput({ times, setTimes }: TimeInputProps) {
         </div>
       ))}
       <button
-        className="add-time-button w-12 rounded-full bg-slate-400 text-xl hover:brightness-110"
+        className="add-time-button w-12 rounded-full bg-indigo-400 text-xl hover:brightness-110"
         type="button"
         onClick={() =>
           setTimes([
diff --git a/client/src/components/timetable.tsx b/client/src/components/timetable.tsx
index dd954ab..1e090b4 100644
--- a/client/src/components/timetable.tsx
+++ b/client/src/components/timetable.tsx
@@ -370,7 +370,7 @@ function Timetable({ timetable_tasks_props }: TimetableProps) {
   return (
     <div
       id="timetable-border"
-      className="h-full w-full rounded-lg bg-slate-900 p-3"
+      className="h-full w-full rounded-lg bg-slate-900 p-3 shadow-xl shadow-black/40"
     >
       <div
         id="timetable-content"
diff --git a/client/src/components/topic_input.tsx b/client/src/components/topic_input.tsx
index 153c677..ffea8fc 100644
--- a/client/src/components/topic_input.tsx
+++ b/client/src/components/topic_input.tsx
@@ -55,7 +55,7 @@ export function TopicInput({
           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"
+              className="new-topic-input flex w-full flex-row justify-evenly gap-2 rounded-lg bg-indigo-400 p-2 brightness-90 hover:brightness-95"
             >
               <input
                 className="color-select h-5 w-5 border-0"
@@ -69,7 +69,7 @@ export function TopicInput({
                 }}
               />
               <input
-                className="topic-name-input w-[75%] bg-slate-400 text-justify placeholder:text-slate-300 hover:brightness-110"
+                className="topic-name-input w-[75%] bg-indigo-400 text-justify placeholder:text-slate-300 hover:brightness-110"
                 type="text"
                 placeholder="Topic name..."
                 value={topic.name}
@@ -94,7 +94,7 @@ export function TopicInput({
 
       {/* Existing Topic Selection */}
       <select
-        className="topic-select w-full rounded-lg bg-slate-400 p-2 text-center brightness-90 hover:brightness-110"
+        className="topic-select w-full rounded-lg bg-indigo-400 p-2 text-center brightness-90 hover:brightness-110"
         onChange={(e) => {
           const id = Number(e.target.value);
           if (!id) return;
@@ -114,7 +114,7 @@ export function TopicInput({
 
       <button
         type="button"
-        className="add-topic-button w-12 rounded-full bg-slate-400 text-xl hover:brightness-110"
+        className="add-topic-button w-12 rounded-full bg-indigo-400 text-xl hover:brightness-110"
         onClick={() =>
           setTopics([...topics, { type: "new", name: "", color_hex: 0xffffff }])
         }
diff --git a/client/src/components/ui/countdown.tsx b/client/src/components/ui/countdown.tsx
deleted file mode 100644
index 217b02f..0000000
--- a/client/src/components/ui/countdown.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { ChangeEvent, useEffect,useState } from "react";
-
-import Timer from "./timer";
-
-interface Timed {
-  taskTime: string;
-}
-
-// in future use task data as input
-
-const Countdown = ({ taskTime }: Timed) => {
-  const [timeRemaining, setTimeRemaining] = useState(0);
-  const [completed, setCompleted] = useState(false);
-
-  const completeTask = (event : ChangeEvent<HTMLInputElement>) => {
-    // send post request to update db
-    setCompleted(event.target.checked);
-  }
-
-  useEffect(() => {
-    if (taskTime) {
-      const countdownInterval = setInterval(() => {
-        const [eventHours, eventMins, eventSec] = taskTime
-          .split(":")
-          .map(Number);
-        const d = new Date();
-        let remainingTime =
-          (eventHours - d.getHours()) * 60 * 60 +
-          (eventMins - d.getMinutes()) * 60 +
-          (eventSec - d.getSeconds());
-
-        if (remainingTime <= 0) {
-          remainingTime = 0;
-          clearInterval(countdownInterval);
-        }
-
-        setTimeRemaining(remainingTime);
-      }, 1000);
-
-      return () => clearInterval(countdownInterval);
-    }
-  }, [taskTime, timeRemaining]);
-
-  return (
-    <>
-      {timeRemaining > 0 ? (
-        <div className="m-8 flex flex-col items-center justify-center rounded-xl bg-blue-500 p-3 px-10 font-sans text-white shadow-lg shadow-blue-500/50">
-          <h1 className="p-2 font-sans">TIME LEFT</h1>
-          <div>{Timer(timeRemaining)}</div>
-          <input type="checkbox" onChange={completeTask}></input>
-        </div>
-      ) : (
-        <div></div>
-      )}
-    </>
-  );
-};
-
-export default Countdown;
diff --git a/client/src/components/ui/currentTask.tsx b/client/src/components/ui/currentTask.tsx
deleted file mode 100644
index 8cb03a7..0000000
--- a/client/src/components/ui/currentTask.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useEffect, useState } from "react";
-
-import Countdown from "./countdown";
-import TimeDisplay from "./timeDisplay";
-
-interface Task {
-  id: number;
-  start_time: string;
-  end_time: string;
-}
-
-interface Tasks {
-  tasks: Task[];
-}
-
-const CurrentTask = ({ tasks }: Tasks) => {
-  const [currentTasks, setCurrentTasks] = useState<Task[]>([]);
-  const [currentTask, setCurrentTask] = useState<Task>(
-    {
-      id : 1,
-      start_time : "00:00:00",
-      end_time : "00:00:00"
-    }
-  );
-
-  useEffect(() => {
-    function getCurrentTask() {
-      setCurrentTasks([]);
-      tasks.forEach((task) => {
-        const [startHours, startMins, startSec] = task.start_time
-          .split(":")
-          .map(Number);
-        const [endHours, endMins, endSec] = task.end_time
-          .split(":")
-          .map(Number);
-
-        const d = new Date();
-        const start_time = startHours * 60 * 60 + startMins * 60 + startSec;
-        const end_time = endHours * 60 * 60 + endMins * 60 + endSec;
-        const cur_time =
-          d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
-        console.log(
-          startHours,
-          " ",
-          endHours,
-          " ",
-          endHours,
-          " ",
-          endMins,
-          " ",
-          d.getHours(),
-          " ",
-          d.getMinutes(),
-        );
-        console.log(start_time, " ", end_time, " ", cur_time);
-
-        if (start_time <= cur_time && end_time >= cur_time) {
-          setCurrentTasks((prevTasks) => [...prevTasks, task]);
-        }
-      });
-      setCurrentTask(currentTasks[0]);
-    }
-
-    getCurrentTask();
-  }, [tasks]);
-
-  const updateTask = (status : string) => {
-    if (status == "finished") {
-      setCurrentTask(currentTasks[0]);
-    }
-  }
-
-  return (
-    <>
-      <ul>
-        {currentTasks.length <= 0 ? (
-          <>
-            <div className="m-8 flex flex-col items-center justify-center rounded-xl bg-blue-500 p-3 px-10 font-sans text-white shadow-lg shadow-blue-500/50">
-              <h1 className="p-2 font-sans">NO CURRENT TASKS</h1>
-              <div>MAKE ONE?</div>
-            </div>
-          </>
-        ) : (
-          <>
-            {currentTasks.map((task: Task) => (
-              <li key={task.id}>
-                <Countdown taskTime={task.end_time} />
-              </li>
-            ))}
-          </>
-        )}
-      </ul>
-      <div>
-        {currentTasks.length > 0 ? (
-          <TimeDisplay statusSignal={updateTask} end_time={currentTasks[0].end_time} />
-        ):(
-          <></>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default CurrentTask;
diff --git a/client/src/components/ui/focus/timer.tsx b/client/src/components/ui/focus/timer.tsx
index 2c3bc3a..d39e106 100644
--- a/client/src/components/ui/focus/timer.tsx
+++ b/client/src/components/ui/focus/timer.tsx
@@ -2,7 +2,7 @@ const Timer = (timeRemaining: number) => {
   const formatTime = (time: number) => {
     const seconds = Math.floor(time % 60);
     const minutes = Math.floor((time / 60) % 60);
-    const hours = Math.floor((time / (60 * 60)) % 24);
+    const hours = Math.floor((time / (60 * 60)));
 
     return (
       <div className="countdown-display">
@@ -24,7 +24,7 @@ const Timer = (timeRemaining: number) => {
   };
 
   return (
-    <div className="w-32 rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
+    <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold w-full">
       {formatTime(timeRemaining)}
     </div>
   );
diff --git a/client/src/components/ui/navbar.tsx b/client/src/components/ui/navbar.tsx
index 9bd0154..c1dc0a2 100644
--- a/client/src/components/ui/navbar.tsx
+++ b/client/src/components/ui/navbar.tsx
@@ -14,7 +14,7 @@ export function Navbar() {
       : "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">
+    <nav className="relative bg-indigo-500 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
       <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
         <div className="relative flex h-16 items-center justify-between">
           <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
diff --git a/client/src/components/ui/taskDisplay.tsx b/client/src/components/ui/taskDisplay.tsx
deleted file mode 100644
index 4ccc74e..0000000
--- a/client/src/components/ui/taskDisplay.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-export default function TaskDisplay(task_name: string) {
-  return (
-    <div className="m-3 flex flex-col items-center justify-center rounded-3xl bg-slate-900 p-10 shadow-xl shadow-black/40">
-      <h1 className="mb-2 font-inter text-4xl font-semibold">Current Focus</h1>
-      <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
-        {task_name}
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/components/ui/timeDisplay.tsx b/client/src/components/ui/timeDisplay.tsx
deleted file mode 100644
index 9b5e3b7..0000000
--- a/client/src/components/ui/timeDisplay.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import Timer from "./timer";
-
-interface TimeDisplayProps {
-  statusSignal: (data: string) => void;
-  time: string;
-  current: boolean;
-}
-
-export default function TimeDisplay({
-  statusSignal,
-  time,
-  current
-}: TimeDisplayProps) {
-  const [timeRemaining, setTimeRemaining] = useState(0);
-
-  useEffect(() => {
-    const getTimeRemaining = setInterval(() => {
-      const [Hours, Mins, Sec] = time.split(":").map(Number);
-
-      const d = new Date();
-      const time_serial = Hours * 60 * 60 + Mins * 60 + Sec;
-      const cur_time =
-        d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
-
-      let remaining_time = 0;
-
-      remaining_time = time_serial - cur_time;
-      if (remaining_time <= 1) {
-        clearInterval(getTimeRemaining);
-      }
-
-      setTimeRemaining(remaining_time);
-    }, 1000);
-
-    return () => clearInterval(getTimeRemaining);
-  }, [time, timeRemaining]);
-
-  useEffect(() => {
-    if (timeRemaining <= 1) {
-      statusSignal("finished");
-    }
-  }, [timeRemaining, statusSignal]);
-
-  return (
-    <div className="m-3 flex flex-col items-center justify-center rounded-3xl bg-slate-900 p-10 shadow-xl shadow-black/40">
-      {current ? (
-        <>
-          <h1 className="mb-2 font-inter text-4xl font-semibold">Timer</h1>
-        </>
-      ) : (
-        <>
-          <h1 className="mb-2 font-inter text-4xl font-semibold">Next Task</h1>
-        </>
-      )}
-      <div className="time_left">{Timer(timeRemaining)}</div>
-      <div></div>
-    </div>
-  );
-}
diff --git a/client/src/components/ui/timer.tsx b/client/src/components/ui/timer.tsx
deleted file mode 100644
index 353ac7a..0000000
--- a/client/src/components/ui/timer.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-const Timer = (timeRemaining: number) => {
-  const formatTime = (time: number) => {
-    const seconds = Math.floor(time % 60);
-    const minutes = Math.floor((time / 60) % 60);
-    const hours = Math.floor((time / (60 * 60)) % 24);
-
-    return (
-      <div className="countdown-display">
-        <div className="countdown-value">
-          {hours > 0 ? (
-            <>
-              {hours.toString()}
-              <span>:</span>
-            </>
-          ) : (
-            <></>
-          )}
-          {minutes.toString().padStart(2, "0")}
-          <span>:</span>
-          {seconds.toString().padStart(2, "0")}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div className="rounded-full bg-indigo-400 p-3 px-8 font-inter text-xl font-semibold">
-      {formatTime(timeRemaining)}
-    </div>
-  );
-};
-
-export default Timer;
diff --git a/client/src/pages/focus.tsx b/client/src/pages/focus.tsx
index 9d755cd..f0276f8 100644
--- a/client/src/pages/focus.tsx
+++ b/client/src/pages/focus.tsx
@@ -152,9 +152,9 @@ const CountdownTimer = () => {
   }
 
   return (
-    <div className="h-[calc(100vh-64px)] bg-slate-800 p-8 font-inter">
-      <div className="flex flex-col items-center justify-start rounded-xl bg-slate-700 p-8 font-mono text-white shadow-inner shadow-slate-900">
-        <p className="p-4 font-inter text-4xl font-semibold">focus</p>
+    <div className="h-[calc(100vh-64px)] bg-slate-800 font-inter flex w-full flex-col items-center justify-center">
+      <div className="flex flex-col items-center justify-start rounded-xl bg-slate-800 p-8 font-mono text-white">
+        <p className="p-4 font-inter text-4xl font-semibold">Focus</p>
         <div className="flex flex-row justify-center">
           <div className="flex flex-col">
             <div>
@@ -189,7 +189,7 @@ const CountdownTimer = () => {
             </div>
           </div>
           <div>
-            {tasks.length > 0 ? (
+            {times.length > 0 ? (
               <div className="justify-top flex flex-col pl-8">
                 <div className="p-4 font-inter text-2xl font-semibold">
                   tasks
diff --git a/client/src/pages/schedule.tsx b/client/src/pages/schedule.tsx
index b9b5df9..aa4b6b1 100644
--- a/client/src/pages/schedule.tsx
+++ b/client/src/pages/schedule.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import Timetable, {
@@ -5,7 +6,6 @@ import Timetable, {
   resizeAndPositionTimetableElements,
 } from "@/components/timetable";
 import { TimetableTaskProps } from "@/components/timetable_task";
-import { useRouter } from "next/router";
 
 /*
 Database representation of Time.
@@ -46,7 +46,7 @@ interface Task {
 Used to convert database representation of a day to string used by front end.
 */
 enum Day {
-  Monday = 0,
+  Monday = 1,
   Tuesday,
   Wednesday,
   Thursday,
@@ -60,7 +60,6 @@ Page containing a Timetable to visually represent the times that tasks have been
 assigned.
 */
 function Schedule() {
-
   const router = useRouter();
   const [timetableTasksProps, setTimetableTasksProps] = useState<
     TimetableTaskProps[]
@@ -85,7 +84,6 @@ function Schedule() {
     to be displayed. Sets the timetableTasksProps State variable once finished.
     */
     async function fetchTasks() {
-      
       try {
         const token = localStorage.getItem("access");
         if (!token) {
@@ -299,7 +297,7 @@ function Schedule() {
   to run in an infinite loop. */
 
   return (
-    <div className="content-container min-w-screen h-[calc(100vh-64px)] flex w-full flex-row bg-slate-950">
+    <div className="content-container min-w-screen flex h-[calc(100vh-64px)] w-full flex-col items-center justify-center bg-slate-800 p-3">
       <div className="timetable-container max-h-[90vh] w-full p-3">
         <Timetable timetable_tasks_props={timetableTasksProps} />
       </div>
diff --git a/client/src/pages/tasks.tsx b/client/src/pages/tasks.tsx
index f89c9f8..dd30660 100644
--- a/client/src/pages/tasks.tsx
+++ b/client/src/pages/tasks.tsx
@@ -91,9 +91,9 @@ export default function TasksPage() {
       .catch((err) => console.error("Failed to load topics", err));
   }, []);
 
-  if (loading) {
-    return <p>Loading tasks...</p>;
-  }
+  //if (loading) {
+  //  return <p>Loading tasks...</p>;
+  //}
 
   const handleTaskCreated = (task: Item) => {
     setItems((prev) => [...prev, task]);
@@ -163,14 +163,12 @@ export default function TasksPage() {
   }
 
   return (
-    <div className="content-container min-w-screen relative flex min-h-[calc(100vh-64px)] flex-row items-center justify-center bg-slate-500">
+    <div className="content-container min-w-screen relative flex min-h-[calc(100vh-64px)] flex-row items-center justify-center bg-slate-800">
       <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 className="task-list-title border-b-slate-400 p-3 text-center text-4xl font-bold text-slate-100">
+              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"
@@ -189,7 +187,7 @@ export default function TasksPage() {
               />
             </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"
+              className="add-task-container sticky top-3 flex h-full flex-col items-center justify-start rounded-lg bg-slate-900 p-3 shadow-xl"
               style={{ display: showAddTask ? "flex" : "none" }}
             >
               <h1 className="text-3xl font-bold text-slate-100">Add Task</h1>
@@ -207,7 +205,7 @@ export default function TasksPage() {
               </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"
+              className="toggle-add-task-button fixed bottom-9 right-9 flex h-12 w-12 items-center justify-center rounded-full border bg-indigo-400 text-xl brightness-90 hover:brightness-110"
               onClick={toggleShowAddTask}
             >
               {!showAddTask ? <RxPlus /> : <RxCross2 />}
diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index 4869740..f063c10 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -89,6 +89,10 @@
   .scrollbar::-webkit-scrollbar-thumb:hover {
     background: oklch(37.2% 0.044 257.287);
   }
+
+  .scrollbar::-webkit-scrollbar-corner {
+    @apply bg-slate-900
+  }
 }
 
 @layer base {