diff --git a/src/app/landing/journal.tsx b/src/app/landing/journal.tsx
new file mode 100644
index 0000000..2798d65
--- /dev/null
+++ b/src/app/landing/journal.tsx
@@ -0,0 +1,51 @@
+import { motion } from "framer-motion";
+import Image from "next/image";
+import arrow from "@/img/arrow.png";
+import gradient from "@/img/gradient.png";
+import { useEffect, useState } from "react";
+
+export function Journal(props: {setIndex: (index: number) => void}) {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        setLoaded(true);
+    }, []);
+
+    return <motion.div
+        onClick={() => loaded && props.setIndex(2)}
+        initial={{ y: 500 }}
+        transition={{duration: 0.2}}
+        animate={{ y: 0 }}
+        exit={{y: 500}}
+        className="z-[9999] bg-[#030303] absolute h-[100vh] top-0 w-full flex flex-col"
+    >
+        <div className="text-center text-5xl font-bold mt-[5rem] px-5">Take a break for journaling</div>
+        <div className="flex flex-col mx-auto mt-[5rem]">
+            <input className="z-[99999] mx-auto py-2 px-4 bg-[#383838] color-[#7f7f7f] border-2 text-xl border-none rounded-xl"
+                   placeholder="Reflect on what you learned..." />
+        </div>
+        <div className="my-auto">
+            <div
+                unselectable="on"
+                className="select-none text-2xl text-center"
+            >
+                Swipe to continue
+            </div>
+            <Image
+                draggable={false}
+                unselectable={"on"}
+                className="mx-auto mt-10"
+                width={65}
+                alt="arrow"
+                src={arrow}
+            />
+        </div>
+        <Image
+            className="absolute bottom-0 z-[-999] w-full h-[200px] opacity-30 pointer-events-none"
+            alt=""
+            draggable={false}
+            unselectable={"on"}
+            width={window.innerWidth}
+            src={gradient}
+        />
+    </motion.div>
+}
\ No newline at end of file
diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx
index 7090f55..92e538b 100644
--- a/src/app/landing/page.tsx
+++ b/src/app/landing/page.tsx
@@ -6,28 +6,22 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { Time } from "@/app/landing/time";
 import { motion } from "framer";
-import {useAnimate} from "framer-motion";
+import { Journal } from "@/app/landing/journal";
+import { QuickFact } from "@/app/landing/quick_fact";
 
-const slides = [<Time/>];
 export default function Landing() {
     const [clicked1, setClicked1] = useState(false);
-    const [scope, animate] = useAnimate();
-    const [animated, setAnimated] = useState(false);
+    const [index, setIndex] = useState(0);
+    const slides = [<Time setIndex={setIndex} key="1" seconds={8}/>,
+        <Journal setIndex={setIndex} key="2"/>,
+    <QuickFact key="3"/>];
 
-    useEffect(() => {
-        if(!clicked1)
-            return;
-        animate(scope.current, {y:"100vh"});
-        setAnimated(true);
-    }, [animate, scope, clicked1]);
-
-    return clicked1 && animated ? (
-        <Time
-        />
+    return clicked1 ? (
+        slides[index]
     ) : (
         <motion.div
             initial={{y: 0}}
-            ref={scope}
+            exit={{y:"100vh"}}
             onMouseDown={() => setClicked1(true)}
             className="flex-grow flex flex-col"
         >
diff --git a/src/app/landing/quick_fact.tsx b/src/app/landing/quick_fact.tsx
new file mode 100644
index 0000000..9c658cd
--- /dev/null
+++ b/src/app/landing/quick_fact.tsx
@@ -0,0 +1,5 @@
+export function QuickFact() {
+    return <div>
+        Hello
+    </div>
+}
\ No newline at end of file
diff --git a/src/app/landing/time.tsx b/src/app/landing/time.tsx
index 47e544e..0eff41c 100644
--- a/src/app/landing/time.tsx
+++ b/src/app/landing/time.tsx
@@ -2,19 +2,51 @@
 import 'react-circular-progressbar/dist/styles.css';
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import { motion } from 'framer';
-// import { useState } from "react";
+import { useEffect, useState } from "react";
+// import CanvasClass from "@/api/canvas.class";
+// import getSubtask from "../../api/openAI/openAI-API";
 
-export function Time() {
-    // const [secondsLeft, _setSecondsLeft] = useState(100);
-    const percentage = 66;
+export function Time(props: {seconds: number, setIndex: (index: number) => void}) {
+    const [expectedDate] = useState(Date.now()/1000+props.seconds);
+    const [secondsLeft, setSecondsLeft] = useState(props.seconds);
+    // const [subtask, setSubtask] = useState<string | null>("");
+    const percentage = secondsLeft / props.seconds * 100;
 
-    return <motion.div
+    // useEffect(() => {
+    //     (async () => {
+    //         const canvas = new CanvasClass("2096~VBaXaAvP39aGWhVV2xuUnTzn8wxATf98PZz7rmWQFf278B4V3a2nCW7fJkDDxURh");
+    //         const files = await canvas.getAllFiles();
+    //         const result: string | null = await getSubtask(files);
+    //         setSubtask(result);
+    //         console.log(subtask);
+    //     })();
+    // }, []);
+
+
+    useEffect(() => {
+        decreaseClock();
+    }, []);
+
+    function decreaseClock() {
+        if(secondsLeft <= 0)
+            return;
+        setTimeout(() => {
+            setSecondsLeft(Math.max(Math.round(expectedDate - Date.now()/1000),0));
+            decreaseClock();
+        }, 1000);
+    }
+
+    return <motion.div onMouseDown={() => props.setIndex(1)}
         initial={{y: 500}}
         animate={{y: 0}}
-        className="absolute top-0 z-[-999] flex flex-col bg-[#ff5757] h-full w-full items-center justify-center">
-        <h1 className="absolute text-9xl font-bold drop-shadow-md shadow-black">
+        exit={{y: 500}}
+        className="absolute top-0 flex flex-col bg-[#ff5757] h-full w-full items-center justify-center">
+        <h1 className="text-3xl text-center absolute top-[15%] font-bold">
+            What is the average attention span?
+        </h1>
+        <h1 className="absolute text-9xl font-bold" style={{textShadow: "5px 5px 5px 5px black"}}>
             {
-                Math.trunc(100 / 60)
+                secondsLeft
             }
         </h1>
         <div className="flex w-[300px] h-[300px]">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1f36f0c..bf25cc3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
     <body
         className="antialiased overflow-hidden h-[100vh] flex flex-col"
     >
-        <div className="flex w-100 p-5 text-5xl text-center flex-shrink py-6">
+        <div className="flex w-100 z-[999] p-5 text-5xl text-center flex-shrink py-6">
             <h1 className={raleway_heavy.className + " top-[20px] absolute left-[50%] translate-x-[-50%]"}>
                 logo
             </h1>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 27c0368..82268f8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -25,7 +25,7 @@ export default async function Home() {
     <main className={raleway.className + " flex flex-col w-full h-[100vh]"}>
         <div className="flex flex-col mx-auto flex-grow justify-center">
             <TokenForm call={call}/>
-    </div>
+        </div>
     </main>
   );
 }