diff --git a/src/app/data/notes.tsx b/src/app/data/notes.tsx
index ac65f43..645d03c 100644
--- a/src/app/data/notes.tsx
+++ b/src/app/data/notes.tsx
@@ -7,5 +7,4 @@ export const notes: string[] = [
     "Our names are Kaz, Tymur, Daniil, and Mark!",
     "LET'S GO TECH",
     "In my free time, I do poster design for my dorm room",
-    'Ass breaker'
 ];
\ No newline at end of file
diff --git a/src/app/landing/journal.tsx b/src/app/landing/journal.tsx
index 2798d65..df56e85 100644
--- a/src/app/landing/journal.tsx
+++ b/src/app/landing/journal.tsx
@@ -20,7 +20,7 @@ export function Journal(props: {setIndex: (index: number) => void}) {
     >
         <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"
+            <input onMouseDown={event => event.stopPropagation()} 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">
diff --git a/src/app/mindmap/page.tsx b/src/app/landing/mindmap.tsx
similarity index 88%
rename from src/app/mindmap/page.tsx
rename to src/app/landing/mindmap.tsx
index b265eec..e061fd8 100644
--- a/src/app/mindmap/page.tsx
+++ b/src/app/landing/mindmap.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import {notes as initialNotes} from '../data/notes'
 // @ts-ignore
 import { useState } from "react";
+import { motion } from 'framer';
 // Example of notes array
 
 
@@ -35,13 +36,17 @@ const getRandomColor = () => {
     return colors[Math.floor(Math.random() * colors.length)];
 };
 
-export default function Landing() {
+export function MindMap() {
     const [notes, setNotes] = useState<string[]>(initialNotes); // Set the initial state
 
     return (
-        <div style={containerStyles}>
+        <motion.div style={containerStyles}
+                    initial={{ y: 500 }}
+                    transition={{ duration: 0.2 }}
+                    animate={{ y: 0 }}
+                    exit={{ y: 500 }}
+        >
             <div style={innerContainerStyles}>
-                <h1 style={headerStyles}>Your personal mind space</h1>
                 <div style={notesContainerStyles}>
                     {notes.map((note, index) => (
                         <div key={index} style={getRandomStyles()}>
@@ -50,7 +55,7 @@ export default function Landing() {
                     ))}
                 </div>
             </div>
-        </div>
+        </motion.div>
     );
 }
 
@@ -61,7 +66,7 @@ const containerStyles = {
     justifyContent: "center",
     height: "100vh", // Ensure the container spans vertically
     padding: "10px",
-    width: "600px"
+    width: "100%"
 };
 
 const innerContainerStyles = {
diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx
index 92e538b..b089879 100644
--- a/src/app/landing/page.tsx
+++ b/src/app/landing/page.tsx
@@ -3,18 +3,21 @@
 import arrow from "../../img/arrow.png";
 import gradient from "../../img/gradient.png";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Time } from "@/app/landing/time";
 import { motion } from "framer";
 import { Journal } from "@/app/landing/journal";
 import { QuickFact } from "@/app/landing/quick_fact";
+import { MindMap } from "@/app/landing/mindmap";
 
 export default function Landing() {
     const [clicked1, setClicked1] = useState(false);
     const [index, setIndex] = useState(0);
     const slides = [<Time setIndex={setIndex} key="1" seconds={8}/>,
         <Journal setIndex={setIndex} key="2"/>,
-    <QuickFact key="3"/>];
+    <QuickFact key="3" setIndex={setIndex}/>,
+    <MindMap key="4"/>
+    ];
 
     return clicked1 ? (
         slides[index]
diff --git a/src/app/landing/quick_fact.tsx b/src/app/landing/quick_fact.tsx
index 9c658cd..c180d66 100644
--- a/src/app/landing/quick_fact.tsx
+++ b/src/app/landing/quick_fact.tsx
@@ -1,5 +1,22 @@
-export function QuickFact() {
-    return <div>
-        Hello
-    </div>
+import { motion } from "framer";
+
+export function QuickFact(props: {setIndex: (index: number) => void}) {
+    return <motion.div
+        initial={{ y: 500 }}
+        transition={{ duration: 0.2 }}
+        animate={{ y: 0 }}
+        exit={{ y: 500 }}
+        onMouseDown={() => props.setIndex(3)}
+        className="h-[100vh] w-full bg-cyan-500 absolute top-0
+        from-[#5ce1e6] to-[rgba(0,0,0,.6)] bg-gradient-to-b from-90%"
+    >
+        <div className="text-center mt-[10rem] text-5xl font-bold">
+            Quick fact!
+        </div>
+
+        <div className="text-center mt-[10rem] text-5xl px-5">
+            90% of information is forgotten within 7 days
+        </div>
+
+    </motion.div>
 }
\ No newline at end of file
diff --git a/src/app/landing/time.tsx b/src/app/landing/time.tsx
index 0eff41c..1dff9a5 100644
--- a/src/app/landing/time.tsx
+++ b/src/app/landing/time.tsx
@@ -4,6 +4,8 @@ import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import { motion } from 'framer';
 import { useEffect, useState } from "react";
 // import CanvasClass from "@/api/canvas.class";
+// import getSubtask from "@/api/openAI/openAI-API";
+// import CanvasClass from "@/api/canvas.class";
 // import getSubtask from "../../api/openAI/openAI-API";
 
 export function Time(props: {seconds: number, setIndex: (index: number) => void}) {
@@ -12,15 +14,15 @@ export function Time(props: {seconds: number, setIndex: (index: number) => void}
     // const [subtask, setSubtask] = useState<string | null>("");
     const percentage = secondsLeft / props.seconds * 100;
 
-    // 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);
-    //     })();
-    // }, []);
+    // async function hello() {
+    //     "use server"
+    //     const canvas = new CanvasClass("2096~VBaXaAvP39aGWhVV2xuUnTzn8wxATf98PZz7rmWQFf278B4V3a2nCW7fJkDDxURh");
+    //     const files = await canvas.getAllFiles();
+    //     const result: string | null = await getSubtask(files);
+    //     setSubtask(result);
+    //     console.log(subtask);
+    // }
+    // hello();
 
 
     useEffect(() => {
@@ -40,9 +42,10 @@ export function Time(props: {seconds: number, setIndex: (index: number) => void}
         initial={{y: 500}}
         animate={{y: 0}}
         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?
+        className="absolute top-0 flex flex-col bg-[#ff5757] h-full w-full items-center justify-center
+        from-[#ff5757] to-[rgba(56,56,56,.6)] bg-gradient-to-b from-90%">
+        <h1 className="text-2xl text-center absolute top-[15%] font-bold">
+            What is covered in the "day 4 nested quantifiers" from the course?
         </h1>
         <h1 className="absolute text-9xl font-bold" style={{textShadow: "5px 5px 5px 5px black"}}>
             {