diff --git a/client/src/components/ui/focus/taskDisplay.tsx b/client/src/components/ui/focus/taskDisplay.tsx
index 9fc30ee..5a094f1 100644
--- a/client/src/components/ui/focus/taskDisplay.tsx
+++ b/client/src/components/ui/focus/taskDisplay.tsx
@@ -16,12 +16,14 @@ interface Time {
 export default function TaskDisplay({
   task,
   time,
+  current
 }: {
   task: Task;
   time: Time;
+  current: Boolean;
 }) {
   return (
-    <div className="px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40">
+    <div className={current ? "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-500 p-4 shadow-md shadow-black/40 outline-3 outline outline-slate-50" : "px-auto m-3 flex flex-auto flex-col rounded-3xl bg-indigo-400 p-4 shadow-md shadow-black/40"}>
       <div className="flex flex-auto flex-row gap-4 px-3">
         <div>{task.name}:</div>
         <div>
diff --git a/client/src/components/ui/focus/timeDisplay.tsx b/client/src/components/ui/focus/timeDisplay.tsx
index 965ffd9..05d8839 100644
--- a/client/src/components/ui/focus/timeDisplay.tsx
+++ b/client/src/components/ui/focus/timeDisplay.tsx
@@ -6,12 +6,14 @@ interface TimeDisplayProps {
   statusSignal: (data: string) => void;
   time: string;
   current: boolean;
+  day: number;
 }
 
 export default function TimeDisplay({
   statusSignal,
   time,
   current,
+  day,
 }: TimeDisplayProps) {
   const [timeRemaining, setTimeRemaining] = useState(0);
 
@@ -20,13 +22,15 @@ export default function TimeDisplay({
       const [Hours, Mins, Sec] = time.split(":").map(Number);
 
       const d = new Date();
-      const time_serial = Hours * 60 * 60 + Mins * 60 + Sec;
+      const time_serial = Hours * 60 * 60 + Mins * 60 + Sec;      
+      var day_diff = ((day - d.getDay() + 8) % 8) * 24 * 60 * 60
+
       const cur_time =
         d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
 
       let remaining_time = 0;
 
-      remaining_time = time_serial - cur_time;
+      remaining_time = time_serial - cur_time + day_diff;
       if (remaining_time <= 1) {
         clearInterval(getTimeRemaining);
       }
@@ -35,7 +39,7 @@ export default function TimeDisplay({
     }, 1000);
 
     return () => clearInterval(getTimeRemaining);
-  }, [time, timeRemaining]);
+  }, [time, timeRemaining, day]);
 
   useEffect(() => {
     if (timeRemaining <= 1) {
diff --git a/client/src/components/ui/focus/upcomingTasks.tsx b/client/src/components/ui/focus/upcomingTasks.tsx
index 95d3236..00e52a7 100644
--- a/client/src/components/ui/focus/upcomingTasks.tsx
+++ b/client/src/components/ui/focus/upcomingTasks.tsx
@@ -17,17 +17,12 @@ interface Time {
   task: number;
 }
 
-interface Tasks {
-  tasks: Task[];
-  times: Time[];
-}
-
 function serializeTime(time: string) {
   const [Hours, Mins, Sec] = time.split(":").map(Number);
   return Hours * 60 * 60 + Mins * 60 + Sec;
 }
 
-export default function UpcomingTasks({ tasks, times }: Tasks) {
+export default function UpcomingTasks({ tasks, times, refresh }: { tasks: Task[], times:Time[], refresh : Boolean}) {
   const [upcomingTimes, setUpcomingTimes] = useState<Time[]>([]);
 
   useEffect(() => {
@@ -53,17 +48,20 @@ export default function UpcomingTasks({ tasks, times }: Tasks) {
     }
 
     sortTimes();
-  }, [times, tasks]);
+  }, [times, tasks, refresh]);
 
   return (
     <div className="rounded-2xl bg-slate-900 p-2 py-3 shadow-xl shadow-black/40">
       <div className="scrollbar h-[285px] w-96 overflow-y-auto overflow-x-hidden">
-        {upcomingTimes.map((time: Time) => (
+        {upcomingTimes.map((time: Time, index) => (
+          <>
           <TaskDisplay
             task={tasks.filter((task) => task.id === time.task)[0]}
             time={time}
             key={time.id}
+            current={index===0}
           />
+          </>
         ))}
       </div>
     </div>
diff --git a/client/src/components/ui/timeDisplay.tsx b/client/src/components/ui/timeDisplay.tsx
index 965ffd9..9b5e3b7 100644
--- a/client/src/components/ui/timeDisplay.tsx
+++ b/client/src/components/ui/timeDisplay.tsx
@@ -11,7 +11,7 @@ interface TimeDisplayProps {
 export default function TimeDisplay({
   statusSignal,
   time,
-  current,
+  current
 }: TimeDisplayProps) {
   const [timeRemaining, setTimeRemaining] = useState(0);
 
diff --git a/client/src/pages/focus.tsx b/client/src/pages/focus.tsx
index fd4fc5f..8a44e9a 100644
--- a/client/src/pages/focus.tsx
+++ b/client/src/pages/focus.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import CurrentTaskTitle from "@/components/ui/focus/currentTaskTitle";
 import TimeDisplay from "@/components/ui/focus/timeDisplay";
 import UpcomingTasks from "@/components/ui/focus/upcomingTasks";
-import Refresh from "@/components/ui/refresh";
+import { useRouter } from "next/router";
 
 interface Time {
   id: number;
@@ -14,10 +14,19 @@ interface Time {
   task: number;
 }
 
+interface Topic {
+  id: number;
+  name: string;
+  color_hex: number;
+}
+
 interface Task {
   id: number;
   name: string;
+  completed: boolean;
   description: string;
+  times: Time[];
+  topics: Topic[];
 }
 
 function serializeTime(time: string) {
@@ -26,94 +35,118 @@ function serializeTime(time: string) {
 }
 
 const CountdownTimer = () => {
+  const router = useRouter();
   const [times, setTimes] = useState<Time[]>([]);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [currentTime, setCurrentTime] = useState<Time | null>();
   const [currentTask, setCurrentTask] = useState<Task | null>();
   const [nextTime, setNextTime] = useState<Time | null>();
-  const [loading, setLoading] = useState(false);
-
-  async function refreshTimes() {
-    setLoading(true);
-
-    try {
-      const response = await fetch("http://localhost:8000/api/planner/time/");
-      if (!response.ok) {
-        throw new Error(`Response status: ${response.status}`);
-      }
-
-      const result = await response.json();
-      setTimes(result);
-      getCurrentTask(result);
-      setLoading(false);
-    } catch (error) {
-      console.error(error);
-    }
-  }
+  const [refresh, setRefresh] = useState(false);
 
   useEffect(() => {
     async function fetchTask() {
       try {
-        const response = await fetch(
-          "http://localhost:8000/api/planner/tasks/",
+        const token = localStorage.getItem("access");
+        if (!token) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
+        }
+        const auth = await fetch(
+          "http://localhost:8000/api/planner/protected/",
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
         );
-        if (!response.ok) {
-          throw new Error(`Response status: ${response.status}`);
+        if (!auth.ok) {
+          router.push("/login"); //redirect to login if unauthorised
+          return;
         }
-        const result = await response.json();
+        const tasksFetch = await fetch(
+          `http://localhost:8000/api/planner/tasks/`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+        if (!tasksFetch.ok) {
+          throw new Error(`Response status: ${tasksFetch.status}`);
+        }
+        const result = await tasksFetch.json();
+        console.log("tasks: ", result);
         setTasks(result);
-        const cur_task = tasks.filter((task) => task.id === currentTime?.task);
-        setCurrentTask(cur_task[0]);
+
       } catch (error) {
         console.error(error);
       }
     }
 
     fetchTask();
-  }, [tasks, currentTime]);
+  }, [router]);
+
+  useEffect(() => {
+    var task_times : Time[] = [];
+    for (let index = 0; index < tasks.length; index++) {
+      const task = tasks[index];
+      for (let i = 0; i < task.times.length; i++) {
+        task_times = task_times.concat(task.times[i])
+        console.log("new time: ", task.times[i]);
+      }
+    }
+    setTimes(task_times);
+    console.log("times: ", task_times);
+    getCurrentTask(task_times);
+  }, [tasks])
 
   function getCurrentTask(ts: Time[]) {
-    console.log(times);
-    let upcomingTimes: Time[];
-
-    const d = new Date();
-    const cur_time =
-      d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
-    const cur_d = d.getDay();
-
-    // filter out finished tasks
-    upcomingTimes = ts.filter((time) => {
-      return !(cur_d == time.day && serializeTime(time.end_time) <= cur_time);
-    });
-
-    // sort by start time
-    upcomingTimes = upcomingTimes.sort((a, b) => {
-      return (
-        serializeTime(a.start_time) +
-        ((a.day + 8 - cur_d) % 8) * 24 * 60 * 60 -
-        (serializeTime(b.start_time) + ((b.day + 8 - cur_d) % 8) * 24 * 60 * 60)
-      );
-    });
-
-    // logic for if there are no tasks currently or at all
-    if (upcomingTimes.length > 0) {
-      if (
-        serializeTime(upcomingTimes[0].start_time) < cur_time &&
-        upcomingTimes[0].day == cur_d
-      ) {
-        setCurrentTime(upcomingTimes[0]);
+      let upcomingTimes: Time[];
+
+      const d = new Date();
+      const cur_time =
+        d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds();
+      const cur_d = d.getDay();
+
+      // filter out finished tasks
+      upcomingTimes = ts.filter((time) => {
+        return !(cur_d == time.day && serializeTime(time.end_time) <= cur_time + 10);
+      });
+
+      // sort by start time
+      upcomingTimes = upcomingTimes.sort((a, b) => {
+        return (
+          serializeTime(a.start_time) +
+          ((a.day + 8 - cur_d) % 8) * 24 * 60 * 60 -
+          (serializeTime(b.start_time) + ((b.day + 8 - cur_d) % 8) * 24 * 60 * 60)
+        );
+      });
+
+      // logic for if there are no tasks currently or at all
+      if (upcomingTimes.length > 0) {
+        if (
+          serializeTime(upcomingTimes[0].start_time) < cur_time &&
+          upcomingTimes[0].day == cur_d
+        ) {
+          setCurrentTime(upcomingTimes[0]);
+            
+          const cur_task = tasks.filter((task) => task.id === upcomingTimes[0]?.task);
+          console.log(tasks, cur_task)
+          setCurrentTask(cur_task[0]);
+        } else {
+          setCurrentTime(null);
+          setCurrentTask(null);
+          setNextTime(upcomingTimes[0]);
+        }
       } else {
         setCurrentTime(null);
-        setNextTime(upcomingTimes[0]);
+        setNextTime(null);
       }
-    } else {
-      setCurrentTime(null);
-      setNextTime(null);
     }
-  }
 
   function onTaskEnd(status: string) {
     if (status == "finished") {
+      setRefresh(!refresh);
       getCurrentTask(times);
     }
   }
@@ -130,6 +163,7 @@ const CountdownTimer = () => {
                   statusSignal={onTaskEnd}
                   time={currentTime.end_time}
                   current={true}
+                  day={currentTime.day}
                 />
               ) : (
                 <>
@@ -138,6 +172,7 @@ const CountdownTimer = () => {
                       statusSignal={onTaskEnd}
                       time={nextTime.start_time}
                       current={false}
+                      day={nextTime.day}
                     />
                   ) : (
                     <></>
@@ -154,12 +189,12 @@ const CountdownTimer = () => {
             </div>
           </div>
           <div>
-            {times.length > 1 ? (
+            {tasks.length > 0 ? (
               <div className="justify-top flex flex-col pl-8">
                 <div className="p-4 font-inter text-2xl font-semibold">
-                  upcoming
+                  tasks
                 </div>
-                <UpcomingTasks tasks={tasks} times={times} />
+                <UpcomingTasks tasks={tasks} times={times} refresh={refresh}/>
               </div>
             ) : (
               <></>
@@ -167,7 +202,7 @@ const CountdownTimer = () => {
           </div>
         </div>
         <div className="p-8">
-          <Refresh loading={loading} update={refreshTimes} />
+          
         </div>
       </div>
     </div>