diff --git a/README.md b/README.md
index 1acbd9f..3928190 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <p align="center"><img width="300" alt="Tech Optimum Logo" src="https://www.techoptimum.org/logo-transparent.png"></p>
 <h1 align="center"><a href="https://techoptimum.org">Tech Optimum</a></h1>
 
-[**Our Learning Platform**](https://dashboard.techoptimum.org)
+[**Learning Platform**](https://dashboard.techoptimum.org)
 
 Welcome to Tech Optimum, a nonprofit organization dedicated to helping students in computer science through accessible coding courses, publicizing internships for students, tech talks and more. If you are interested in joining our community, join [here](https://techoptimum.org/discord). If you would like to contribute to our repositories or join Tech Optimum as a staff member, please go [here.](https://techoptimum.org/join-team)
 
diff --git a/package-lock.json b/package-lock.json
index 5c4cf7f..a417c4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3889,10 +3889,28 @@
       "version": "0.16.3",
       "license": "MIT"
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "peer": true
+    },
     "node_modules/@types/stylis": {
       "version": "4.2.0",
       "license": "MIT"
     },
+    "node_modules/@types/three": {
+      "version": "0.158.3",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.158.3.tgz",
+      "integrity": "sha512-6Qs1rUvLSbkJ4hlIe6/rdwIf61j1x2UKvGJg7s8KjswYsz1C1qDTs6voVXXB8kYaI0hgklgZgbZUupfL1l9xdA==",
+      "peer": true,
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "2.0.6",
       "license": "MIT"
@@ -7367,6 +7385,12 @@
         "three": ">=0.137"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "peer": true
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "license": "MIT",
@@ -9985,6 +10009,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
+      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "license": "MIT",
diff --git a/src/app/page.js b/src/app/page.js
index 0a87816..2c7c747 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -8,10 +8,9 @@ import Features from "@/components/features";
 import Approach from "@/components/approach";
 import Popup from "@/components/popup";
 import { Box, Heading } from "@chakra-ui/react";
-import TechGuru from "@/components/tech-guru-show-off";
 import Sponsors from "@/components/sponsors";
-import ProgressCheck from "@/components/progress-check-show-off";
-import ChapterContent from "@/components/chapter-content-show";
+import DashboardShowoff from "@/components/dashboard-showoff";
+
 const sponsorsData = [
   { imagePath: "/sponsors/open-ai.png", link: "https://openai.com" },
   { imagePath: "/sponsors/azure.png", link: "https://azure.microsoft.com" },
@@ -82,9 +81,8 @@ export default function Home() {
 
       <Sponsors sponsors={sponsorsData} />
       <Courses />
-     { /*<ProgressCheck />
-      <ChapterContent />
-      <TechGuru/>*/}
+      
+      <DashboardShowoff />
     
       <Features />
       <Approach />
diff --git a/src/components/chapter-content-show.jsx b/src/components/chapter-content-show.jsx
index 22a3d52..b507c57 100644
--- a/src/components/chapter-content-show.jsx
+++ b/src/components/chapter-content-show.jsx
@@ -31,10 +31,12 @@ import ReactMarkdown from "react-markdown";
 import style from "@/styles/react-highlighter";
 
 const ChapterContent = ({ content, index }) => {
+  const [hasCopied, setHasCopied] = useState({});
+
   return (
     <Flex my="10px" direction="column">
       <Box
-        px="3rem"
+        // px="3rem"
         position="sticky"
         bg="white"
         top="56px"
@@ -71,7 +73,7 @@ const ChapterContent = ({ content, index }) => {
               as={Button}
               rightIcon={<ChevronDownIcon />}
             >
-              Variables
+              Getting Setup & Basics
             </MenuButton>
             <MenuList color="primary">
               <MenuItem
@@ -79,7 +81,7 @@ const ChapterContent = ({ content, index }) => {
                 as="a"
                 textDecoration="none !important"
               >
-                lesson 1
+                Lesson 1: Getting Setup & Basics
               </MenuItem>
             </MenuList>
           </Menu>
@@ -98,7 +100,7 @@ const ChapterContent = ({ content, index }) => {
       <Heading
         className="heading"
         fontWeight="500"
-        px="3rem"
+        // px="3rem"
         mb="10px"
         fontSize="3xl"
         color="primary"
@@ -106,7 +108,13 @@ const ChapterContent = ({ content, index }) => {
       >
         Lesson 1: Getting Setup & Basics
       </Heading>
-      <AspectRatio my="1rem" ml="3rem" maxW={`90%`} ratio={16 / 9}>
+      <AspectRatio
+        my="1rem"
+        // ml="3rem"
+        // maxW={`90%`}
+        maxW={`98%`}
+        ratio={16 / 9}
+      >
         <iframe
           src="https://www.youtube.com/embed/RQzB6oRgi2g?si=aMPvGOByXVSPy_8H"
           title="Intro to Javascript Lesson 1"
@@ -120,17 +128,17 @@ const ChapterContent = ({ content, index }) => {
               code({ node, inline, className, children, ...props }) {
                 const match = /language-(\w+)/.exec(className || "");
                 const textToCopy = String(children).replace(/\n$/, "");
-                const { hasCopied, onCopy } = useClipboard(textToCopy);
+                // const { hasCopied, onCopy } = useClipboard(textToCopy);
+                setHasCopied({...hasCopied, [textToCopy]: false})
 
                 return !inline && match ? (
                   <Box position="relative">
                     <Prism
                       {...props}
-                      children={textToCopy}
                       style={style}
                       language={match[1]}
                       PreTag="div"
-                    />
+                    >{textToCopy}</Prism>
                     <Box position="absolute" top="5px" right="6px">
                       <IconButton
                         _hover={{
@@ -140,10 +148,14 @@ const ChapterContent = ({ content, index }) => {
                         border="none"
                         background="none"
                         color="whiteAlpha.900"
-                        onClick={onCopy}
+                        onClick={() => {
+                          navigator.clipboard.writeText(textToCopy).then(() => {
+                            setHasCopied({...hasCopied, [textToCopy]: true})
+                          });
+                        }}
                         aria-label="Copy to clipboard"
                         icon={
-                          hasCopied ? (
+                          hasCopied[textToCopy] ? (
                             <CheckIcon color="rgb(67, 155, 255)" />
                           ) : (
                             <CopyIcon />
@@ -171,7 +183,12 @@ const ChapterContent = ({ content, index }) => {
 
 const ChapterPreview = () => {
   return (
-    <Flex width="700px" flexDirection="column" mx="auto" my={5}>
+    <Flex
+      // width="700px"
+      flexDirection="column"
+      mx="auto"
+      my={5}
+    >
       <ChapterContent
         index={6}
         content={`JavaScript is a versatile, high-level programming language that is primarily used for adding interactive features to websites. It's one of the core technologies of the web, alongside HTML and CSS. Despite its name, it's unrelated to Java.
diff --git a/src/components/dashboard-showoff.jsx b/src/components/dashboard-showoff.jsx
new file mode 100644
index 0000000..e4afd06
--- /dev/null
+++ b/src/components/dashboard-showoff.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import ProgressCheck from "@/components/progress-check-show-off";
+import ChapterContent from "@/components/chapter-content-show";
+import TechGuru from "@/components/tech-guru-show-off";
+import { Box, Heading, Text } from "@chakra-ui/react";
+
+function dashboardShowoff() {
+  const [ tab, setTab ] = useState("content");
+  return (
+    <Box
+      pt="1rem"
+      mt={["0rem", "4rem"]}
+      maxW="1070px"
+      mx="auto"
+      direction={"column"}
+      width="100%"
+      display="flex"
+      justifyContent="start"
+      alignItems="center"
+    >
+      <Box>
+        <Heading
+          textAlign={{ base: "center", lg: "left" }}
+          color="primary"
+          fontSize={{ base: "3xl", md: "4xl" }}
+          mb="10px"
+        >
+          Our Dashboard
+        </Heading>
+        <Box display="flex" justifyContent="center"
+        alignItems="center" width="100%" mb="20px">
+          <Text color={tab == "content" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "content" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("content")}>1. Quality Content & Videos</Text>
+          <Text color={tab == "questions" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "questions" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("questions")}>2. Progress Check w/ Questions</Text>
+          <Text color={tab == "ai" ? "blue.500" : "grey"} borderBottom="2px" borderColor={tab == "ai" ? "blue.500" : "grey"} _hover={{ borderColor: "blue.200", color: "blue.200", cursor: "pointer" }} mr="30px" px="4px" onClick={() => setTab("ai")}>3. AI Help (Tech Guru)</Text>
+        </Box>
+        {tab === "content" && (
+          <ChapterContent />
+        )}
+        {tab === "questions" && (
+          <ProgressCheck />
+        )}
+        {tab === "ai" && (
+          <TechGuru />
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default dashboardShowoff;
diff --git a/src/components/progress-check-show-off.jsx b/src/components/progress-check-show-off.jsx
index b3d1a4f..cef1414 100644
--- a/src/components/progress-check-show-off.jsx
+++ b/src/components/progress-check-show-off.jsx
@@ -12,16 +12,18 @@ import {
   Text,
   IconButton,
   useToast,
+  ModalCloseButton,
 } from "@chakra-ui/react";
 import { BsSend } from "react-icons/bs";
 import ReactMarkdown from "react-markdown";
 import { Prism } from "react-syntax-highlighter";
 import { CheckIcon, CopyIcon } from "@chakra-ui/icons";
-import { useClipboard } from "@chakra-ui/react";
+import { useClipboard, Flex } from "@chakra-ui/react";
 
 function Chapter() {
   const [showQuestions, setShowQuestions] = useState(false);
   const [answeredQuestions, setAnsweredQuestions] = useState([]);
+  const [hasCopied, setHasCopied] = useState({});
   const toast = useToast();
 
   const handleAnswer = (isCorrect) => {
@@ -75,14 +77,17 @@ function Chapter() {
   return (
     <Box>
       <Button onClick={() => setShowQuestions(true)}>
-        Intro to Javascript Questions
+        Check here for a progress check
       </Button>
       <Modal isOpen={showQuestions} onClose={() => setShowQuestions(false)}>
         <ModalOverlay />
-        <ModalContent mx="2rem" bg="fourth" color="black" bg="white">
-          <ModalHeader pb="0" color="primary">
-            Intro to Javascript Questions
-          </ModalHeader>
+        <ModalContent mx="2rem" color="black" bg="white">
+          <Flex pb="0" justifyContent="space-between" alignItems="center">
+            <ModalHeader color="primary" whiteSpace="nowrap">
+              Intro to Javascript Questions
+            </ModalHeader>
+            <ModalCloseButton mt="8px"></ModalCloseButton>
+          </Flex>
           <ModalBody>
             {mockQuestions.map((question, questionIndex) => (
               <div key={question._id}>
@@ -91,30 +96,32 @@ function Chapter() {
                     questionIndex + 1
                   }`}</Badge>
                   <ReactMarkdown
-                    children={question.question}
                     components={{
                       code({ node, inline, className, children, ...props }) {
                         const match = /language-(\w+)/.exec(className || "");
                         const textToCopy = String(children).replace(/\n$/, "");
-                        const { hasCopied, onCopy } = useClipboard(textToCopy);
+                        setHasCopied({...hasCopied, [textToCopy]: false})
 
                         return !inline && match ? (
                           <Box position="relative">
                             <Prism
                               {...props}
-                              children={textToCopy}
                               language={match[1]}
                               PreTag="div"
-                            />
+                            >{textToCopy}</Prism>
                             <Box position="absolute" top="5px" right="6px">
                               <IconButton
                                 border="none"
                                 background="none"
                                 color="whiteAlpha.900"
-                                onClick={onCopy}
+                                onClick={() => {
+                                  navigator.clipboard.writeText(textToCopy).then(() => {
+                                    setHasCopied({...hasCopied, [textToCopy]: true})
+                                  });
+                                }}
                                 aria-label="Copy to clipboard"
                                 icon={
-                                  hasCopied ? (
+                                  hasCopied[textToCopy] ? (
                                     <CheckIcon color="rgb(67, 155, 255)" />
                                   ) : (
                                     <CopyIcon />
@@ -128,7 +135,7 @@ function Chapter() {
                         );
                       },
                     }}
-                  />
+                  >{question.question}</ReactMarkdown>
                 </Box>
                 <Text
                   mb="10px"
@@ -171,7 +178,7 @@ function Chapter() {
                               ];
                             });
                           }}
-                          style={{ display: 'none' }} 
+                          style={{ display: "none" }}
                         />
                         <label
                           htmlFor={`radio-${option._id}`}
@@ -189,8 +196,12 @@ function Chapter() {
                             backgroundColor: "transparent",
                             padding: "14px",
                           }}
-                          onMouseOver={(e) => e.currentTarget.style.backgroundColor = "#e2e4e7"} // Darken the background on hover
-                          onMouseOut={(e) => e.currentTarget.style.backgroundColor = "#f2f4f7"} // Reset the background color
+                          onMouseOver={(e) =>
+                            (e.currentTarget.style.backgroundColor = "#e2e4e7")
+                          } // Darken the background on hover
+                          onMouseOut={(e) =>
+                            (e.currentTarget.style.backgroundColor = "#f2f4f7")
+                          } // Reset the background color
                         >
                           {String.fromCharCode(65 + index)}
                         </label>
@@ -211,7 +222,7 @@ function Chapter() {
           </ModalBody>
           <ModalFooter>
             <Text fontSize="sm" color="tertiary" mr="auto">
-               This progress check is a demo.
+              This progress check is a demo.
             </Text>
           </ModalFooter>
         </ModalContent>
diff --git a/src/components/tech-guru-show-off.jsx b/src/components/tech-guru-show-off.jsx
index fb7113e..1b1cb35 100644
--- a/src/components/tech-guru-show-off.jsx
+++ b/src/components/tech-guru-show-off.jsx
@@ -68,12 +68,12 @@ const UserMessage = ({ message, user, index }) => {
       >
         <Box
           borderBottomRightRadius={"0px !important"}
-          border="1px"
+          border="2px"
           borderColor="green.300"
           px="8px"
           py="4px"
           borderRadius="lg"
-          boxShadow="0 3.5px 16px 0px rgba(46, 182, 125, 0.5), 0 2px 4px -1px rgba(46, 182, 125, 0.1)"
+          // boxShadow="0 3.5px 16px 0px rgba(46, 182, 125, 0.5), 0 2px 4px -1px rgba(46, 182, 125, 0.1)"
         >
           <Text>{message}</Text>
         </Box>
@@ -90,6 +90,7 @@ const GuruMessage = ({ message, index }) => {
     threshold: 0.1,
     triggerOnce: true,
   });
+  const [hasCopied, setHasCopied] = useState({});
 
   return (
     <>
@@ -103,20 +104,20 @@ const GuruMessage = ({ message, index }) => {
         <Flex mr=".9rem" my="10px" alignItems="flex-end">
           <Box pb="2px">
             <Image
-            minW="35px"
+              minW="35px"
               src="/glyph-black-transparent.png"
               width="30px !important"
               alt="Guru Icon"
             />
           </Box>
           <Box
-            border="1px"
+            border="2px"
             borderColor="blue.300"
             mr="2rem"
             px="8px"
             borderBottomLeftRadius={"0px !important"}
             borderRadius="lg"
-            boxShadow="0 3.5px 16px 0px rgba(66, 153, 225, 0.5), 0 2px 4px -1px rgba(66, 153, 225, 0.1)"
+            // boxShadow="0 3.5px 16px 0px rgba(66, 153, 225, 0.5), 0 2px 4px -1px rgba(66, 153, 225, 0.1)"
           >
             <Box px="10px" className="chapter-content">
               <ReactMarkdown
@@ -124,17 +125,16 @@ const GuruMessage = ({ message, index }) => {
                   code({ node, inline, className, children, ...props }) {
                     const match = /language-(\w+)/.exec(className || "");
                     const textToCopy = String(children).replace(/\n$/, "");
-                    const { hasCopied, onCopy } = useClipboard(textToCopy);
+                    setHasCopied({...hasCopied, [textToCopy]: false})
 
                     return !inline && match ? (
                       <Box position="relative">
                         <Prism
                           {...props}
-                          children={textToCopy}
                           style={style}
                           language={match[1]}
                           PreTag="div"
-                        />
+                        >{textToCopy}</Prism>
                         <Box position="absolute" top="5px" right="6px">
                           <IconButton
                             _hover={{
@@ -144,10 +144,14 @@ const GuruMessage = ({ message, index }) => {
                             border="none"
                             background="none"
                             color="whiteAlpha.900"
-                            onClick={onCopy}
+                            onClick={() => {
+                              navigator.clipboard.writeText(textToCopy).then(() => {
+                                setHasCopied({...hasCopied, [textToCopy]: true})
+                              });
+                            }}
                             aria-label="Copy to clipboard"
                             icon={
-                              hasCopied ? (
+                              hasCopied[textToCopy] ? (
                                 <CheckIcon color="rgb(67, 155, 255)" />
                               ) : (
                                 <CopyIcon />
@@ -191,7 +195,15 @@ const TechGuruFeature = () => {
   };
 
   return (
-    <Flex width="500px" flexDirection="column" mx="auto" my={5}>
+    <Flex
+      // width="500px"
+      flexDirection="column"
+      mx="auto"
+      my={5}
+      pb="3rem"
+      mb="2rem"
+      borderBottom="1px solid #eaeaea"
+    >
       <VStack alignItems="stretch" spacing={3}>
         <Box
           pt=".5rem"