diff --git a/aws/buildspec.yml b/aws/buildspec.yml
index 8ccdc84..db8fff4 100644
--- a/aws/buildspec.yml
+++ b/aws/buildspec.yml
@@ -7,12 +7,14 @@ phases:
       - cd aws/lambda-functions/start_history_search_v2 && zip -qr ../../../start_history_search.zip . && cd -
   post_build:
     commands:
-      # - aws lambda update-function-code --function-name PopulateMatchDataV1 --zip-file fileb://populate_match_data.zip
-      # - aws lambda update-function-code --function-name PopulateMatchDataV2 --zip-file fileb://populate_match_data.zip
-      # - aws lambda update-function-code --function-name PopulateMatchDataV3 --zip-file fileb://populate_match_data.zip
-      # - aws lambda update-function-code --function-name PopulateMatchDataV4 --zip-file fileb://populate_match_data.zip
-      # - aws lambda update-function-code --function-name StartHistorySearch --zip-file fileb://start_history_search.zip
-      - aws lambda update-function-code --function-name test-lambda --zip-file fileb://start_history_search.zip
+      - aws lambda update-function-code --function-name PopulateMatchDataV1 --zip-file fileb://populate_match_data.zip
+      - aws lambda update-function-code --function-name PopulateMatchDataV2 --zip-file fileb://populate_match_data.zip
+      - aws lambda update-function-code --function-name PopulateMatchDataV3 --zip-file fileb://populate_match_data.zip
+      - aws lambda update-function-code --function-name PopulateMatchDataV4 --zip-file fileb://populate_match_data.zip
+      - aws lambda update-function-code --function-name StartHistorySearch --zip-file fileb://start_history_search.zip
+
+      # used for testing
+      # - aws lambda update-function-code --function-name test-lambda --zip-file fileb://start_history_search.zip 
 
 artifacts:
   files:
diff --git a/front-end/.prettierignore b/front-end/.prettierignore
new file mode 100644
index 0000000..8df3f9f
--- /dev/null
+++ b/front-end/.prettierignore
@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+coverage
+.next
+node_modules/
\ No newline at end of file
diff --git a/front-end/.prettierrc b/front-end/.prettierrc
new file mode 100644
index 0000000..b4bfed3
--- /dev/null
+++ b/front-end/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/front-end/components/ChatBox.js b/front-end/components/ChatBox.js
index ef05232..3b26c64 100644
--- a/front-end/components/ChatBox.js
+++ b/front-end/components/ChatBox.js
@@ -25,13 +25,15 @@ export default function ChatBox() {
   };
 
   return (
-    <div className="w-full max-w-lg mx-auto">
-      <div className="border rounded-lg p-4 h-96 overflow-y-auto bg-white shadow">
+    <div className="mx-auto w-full max-w-lg">
+      <div className="h-96 overflow-y-auto rounded-lg border bg-white p-4 shadow">
         {messages.map((msg, idx) => (
           <div
             key={idx}
             className={`my-2 ${
-              msg.sender === "user" ? "text-right text-blue-600" : "text-left text-gray-700"
+              msg.sender === "user"
+                ? "text-right text-blue-600"
+                : "text-left text-gray-700"
             }`}
           >
             <span>{msg.text}</span>
@@ -44,12 +46,12 @@ export default function ChatBox() {
           type="text"
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          className="flex-grow border rounded-l-lg px-3 py-2 focus:outline-none"
+          className="flex-grow rounded-l-lg border px-3 py-2 focus:outline-none"
           placeholder="Type your message..."
         />
         <button
           type="submit"
-          className="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700"
+          className="rounded-r-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
         >
           Send
         </button>
diff --git a/front-end/components/Navbar.js b/front-end/components/Navbar.js
index 826e75e..87c7947 100644
--- a/front-end/components/Navbar.js
+++ b/front-end/components/Navbar.js
@@ -2,13 +2,13 @@ import Link from "next/link";
 
 export default function Navbar() {
   return (
-    <nav className="bg-dark text-background p-4 flex justify-between items-center">
+    <nav className="flex items-center justify-between bg-dark p-4 text-background">
       <h1 className="text-xl font-semibold">####</h1>
       <Link href="/theme-preview" className="text-background hover:underline">
-        <button className="bg-primary hover:bg-accent text-dark px-4 py-2 rounded-lg">
+        <button className="rounded-lg bg-primary px-4 py-2 text-dark hover:bg-accent">
           Button
         </button>
       </Link>
     </nav>
   );
-}
\ No newline at end of file
+}
diff --git a/front-end/components/ThemePreview.jsx b/front-end/components/ThemePreview.jsx
index 423f5d5..16e8a43 100644
--- a/front-end/components/ThemePreview.jsx
+++ b/front-end/components/ThemePreview.jsx
@@ -12,16 +12,16 @@ const colors = [
 export default function ThemePreview() {
   return (
     <div
-      className="min-h-screen flex flex-col items-center justify-center p-8"
+      className="flex min-h-screen flex-col items-center justify-center p-8"
       style={{ backgroundColor: "#F4EAEA", color: "#56374E" }}
     >
-      <h1 className="text-3xl font-bold mb-8">Theme Preview</h1>
+      <h1 className="mb-8 text-3xl font-bold">Theme Preview</h1>
 
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-6">
+      <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
         {colors.map((c, i) => (
           <motion.div
             key={i}
-            className="flex flex-col items-center justify-center p-6 rounded-2xl shadow-lg cursor-pointer transition-transform"
+            className="flex cursor-pointer flex-col items-center justify-center rounded-2xl p-6 shadow-lg transition-transform"
             style={{ backgroundColor: c.hex }}
             whileHover={{
               scale: 1.15,
@@ -30,11 +30,11 @@ export default function ThemePreview() {
             }}
           >
             <div
-              className="w-20 h-20 rounded-xl border border-black/20 mb-3"
+              className="mb-3 h-20 w-20 rounded-xl border border-black/20"
               style={{ backgroundColor: c.hex }}
             />
             <p className="font-semibold text-white drop-shadow">{c.name}</p>
-            <p className="text-sm opacity-80 text-white drop-shadow">{c.hex}</p>
+            <p className="text-sm text-white opacity-80 drop-shadow">{c.hex}</p>
           </motion.div>
         ))}
       </div>
diff --git a/front-end/components/classroom/question.jsx b/front-end/components/classroom/question.jsx
new file mode 100644
index 0000000..4f2e7b2
--- /dev/null
+++ b/front-end/components/classroom/question.jsx
@@ -0,0 +1,16 @@
+import { motion } from "motion/react";
+
+const Question = ({ text }) => {
+  return (
+    <motion.div
+      initial={{ y: 100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ delay: 2.5 }}
+      className="w-10/12 rounded-2xl border-2 border-dark bg-background/90 p-10 text-2xl"
+    >
+      {text}
+    </motion.div>
+  );
+};
+
+export default Question;
diff --git a/front-end/components/classroom/response.jsx b/front-end/components/classroom/response.jsx
new file mode 100644
index 0000000..cb89737
--- /dev/null
+++ b/front-end/components/classroom/response.jsx
@@ -0,0 +1,86 @@
+import { motion } from "motion/react";
+
+const Response = ({ questionType, choices, question }) => {
+  const selectAll = questionType === "selectAll";
+  const multipleChoice = questionType === "multipleChoice";
+  const shortAnswer = questionType === "shortAnswer";
+  return (
+    <motion.div
+      initial={{ x: 100, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      transition={{ delay: 2.5 }}
+      className="flex w-1/4 flex-col items-center justify-center rounded-2xl border-2 border-dark bg-background/90 p-5 text-2xl"
+    >
+      <form>
+        {multipleChoice && (
+          <div>
+            <p> Choose One</p>
+
+            {choices.map((item, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-start gap-2"
+              >
+                <input type="radio" id={item} value={item} name={question} />{" "}
+                <label for={item} className="text-start">
+                  {item}
+                </label>
+              </div>
+            ))}
+            <input
+              type="submit"
+              className="cursor-pointer"
+              value="next question"
+            />
+          </div>
+        )}
+        {selectAll && (
+          <div>
+            <p> Select all that apply</p>
+
+            {choices.map((item, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-start gap-2"
+              >
+                <input type="checkbox" id={item} value={item} name={question} />{" "}
+                <label for={item} className="text-start">
+                  {item}
+                </label>
+              </div>
+            ))}
+            <input
+              type="submit"
+              className="cursor-pointer"
+              value="next question"
+            />
+          </div>
+        )}
+        {shortAnswer && (
+          <div>
+            <p> type your answer</p>
+
+            <div className="flex flex-col items-center justify-center gap-2 py-2">
+              <input
+                type="text"
+                id={choices[0]}
+                name={question}
+                placeholder={choices[0]}
+              />
+            </div>
+            <input
+              type="submit"
+              className="cursor-pointer"
+              value="next question"
+            />
+          </div>
+        )}
+        {!multipleChoice && !selectAll && !shortAnswer && (
+          <p>invalid question type</p>
+        )}
+      </form>
+    </motion.div>
+  );
+};
+
+export default Response;
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
index 3d9bbd8..7b3b491 100644
--- a/front-end/package-lock.json
+++ b/front-end/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@next/eslint-plugin-next": "^15.5.6",
         "framer-motion": "^12.23.24",
-        "next": "14.2.5",
+        "motion": "^12.23.24",
+        "next": "^14.2.33",
         "react": "18.2.0",
         "react-dom": "18.2.0"
       },
@@ -19,6 +20,8 @@
         "eslint": "8.57.1",
         "eslint-config-next": "15.5.6",
         "postcss": "^8.4.31",
+        "prettier": "^3.6.2",
+        "prettier-plugin-tailwindcss": "^0.7.1",
         "tailwindcss": "^3.4.1"
       }
     },
@@ -289,9 +292,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
-      "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.33.tgz",
+      "integrity": "sha512-CgVHNZ1fRIlxkLhIX22flAZI/HmpDaZ8vwyJ/B0SDPTBuLZ1PJ+DWMjCHhqnExfmSQzA/PbZi8OAc7PAq2w9IA==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -332,9 +335,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
-      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
       "cpu": [
         "arm64"
       ],
@@ -348,9 +351,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
-      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
       "cpu": [
         "x64"
       ],
@@ -364,9 +367,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
-      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
       "cpu": [
         "arm64"
       ],
@@ -380,9 +383,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
-      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
       "cpu": [
         "arm64"
       ],
@@ -396,9 +399,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
-      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
       "cpu": [
         "x64"
       ],
@@ -412,9 +415,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
-      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
       "cpu": [
         "x64"
       ],
@@ -428,9 +431,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
-      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
       "cpu": [
         "arm64"
       ],
@@ -444,9 +447,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
-      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
       "cpu": [
         "ia32"
       ],
@@ -460,9 +463,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
-      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
       "cpu": [
         "x64"
       ],
@@ -4075,6 +4078,32 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz",
+      "integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.24",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/motion-dom": {
       "version": "12.23.23",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
@@ -4151,12 +4180,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "14.2.5",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.5.tgz",
-      "integrity": "sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.33.tgz",
+      "integrity": "sha512-GiKHLsD00t4ACm1p00VgrI0rUFAC9cRDGReKyERlM57aeEZkOQGcZTpIbsGn0b562FTPJWmYfKwplfO9EaT6ng==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.5",
+        "@next/env": "14.2.33",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -4171,15 +4200,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.5",
-        "@next/swc-darwin-x64": "14.2.5",
-        "@next/swc-linux-arm64-gnu": "14.2.5",
-        "@next/swc-linux-arm64-musl": "14.2.5",
-        "@next/swc-linux-x64-gnu": "14.2.5",
-        "@next/swc-linux-x64-musl": "14.2.5",
-        "@next/swc-win32-arm64-msvc": "14.2.5",
-        "@next/swc-win32-ia32-msvc": "14.2.5",
-        "@next/swc-win32-x64-msvc": "14.2.5"
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -4761,6 +4790,101 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.1.tgz",
+      "integrity": "sha512-Bzv1LZcuiR1Sk02iJTS1QzlFNp/o5l2p3xkopwOrbPmtMeh3fK9rVW5M3neBQzHq+kGKj/4LGQMTNcTH4NGPtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/front-end/package.json b/front-end/package.json
index 7d88dfe..e92c6b5 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "@next/eslint-plugin-next": "^15.5.6",
     "framer-motion": "^12.23.24",
-    "next": "14.2.5",
+    "motion": "^12.23.24",
+    "next": "^14.2.33",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -20,6 +21,8 @@
     "eslint": "8.57.1",
     "eslint-config-next": "15.5.6",
     "postcss": "^8.4.31",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^3.4.1"
   }
 }
diff --git a/front-end/pages/_app.js b/front-end/pages/_app.js
index 462be55..ea31500 100644
--- a/front-end/pages/_app.js
+++ b/front-end/pages/_app.js
@@ -3,11 +3,12 @@ import "@/styles/SplitBackground.css";
 import "@/styles/button.css";
 import "@/styles/book.css";
 import "@/styles/bookmark.css";
+import "@/styles/classroom.css";
 
 export default function App({ Component, pageProps }) {
   return (
     <>
-      <main className="p-8">
+      <main className="min-h-screen w-screen">
         <Component {...pageProps} />
       </main>
     </>
diff --git a/front-end/pages/book.js b/front-end/pages/book.js
index a04173f..e6fb884 100644
--- a/front-end/pages/book.js
+++ b/front-end/pages/book.js
@@ -1,5 +1,5 @@
-import next from 'next';
-import { useEffect, useState } from 'react';
+import next from "next";
+import { useEffect, useState } from "react";
 
 export default function BookPage() {
   const [bookFullscreen, setBookFullscreen] = useState(false);
@@ -8,9 +8,9 @@ export default function BookPage() {
   const [isTurning, setIsTurning] = useState(false);
 
   const bookmarks = [
-    { y: '20%', label: 'Page 1', page: 10, opposite: 11 },
-    { y: '40%', label: 'Page 2', page: 9, opposite: 12 },
-    { y: '60%', label: 'Page 3', page: 8, opposite: 13 },
+    { y: "20%", label: "Page 1", page: 10, opposite: 11 },
+    { y: "40%", label: "Page 2", page: 9, opposite: 12 },
+    { y: "60%", label: "Page 3", page: 8, opposite: 13 },
   ];
 
   useEffect(() => {
@@ -29,8 +29,8 @@ export default function BookPage() {
     setIsTurning(true);
 
     const nextIndex = page;
-    console.log('Next Page is :', nextIndex);
-    if (nextIndex < currentPage){
+    console.log("Next Page is :", nextIndex);
+    if (nextIndex < currentPage) {
       for (let i = currentPage; i > nextIndex; i--) {
         // Determine which page(s) to turn
         const turnPageEl = document.querySelector(`.page-${i}`);
@@ -39,22 +39,21 @@ export default function BookPage() {
         // Turn current page right to left
         const delay = (currentPage - i) * 300;
         setTimeout(() => {
-          turnPageEl.classList.remove('back-turn', 'back-fade');
-          turnPageEl.classList.add('turn', 'fade');
+          turnPageEl.classList.remove("back-turn", "back-fade");
+          turnPageEl.classList.add("turn", "fade");
         }, delay);
       }
-    }
-    else {
-      console.log('Backflipping to:', nextIndex);
-      for (let i = currentPage+1; i <= nextIndex; i++) {
+    } else {
+      console.log("Backflipping to:", nextIndex);
+      for (let i = currentPage + 1; i <= nextIndex; i++) {
         // Determine which page(s) to turn
         const turnPageEl = document.querySelector(`.page-${i}`);
         if (!turnPageEl) return;
         // Turn current page left to right
         const delay = (i - currentPage) * 300;
         setTimeout(() => {
-          turnPageEl.classList.remove('turn', 'fade');
-          turnPageEl.classList.add('back-turn', 'back-fade');
+          turnPageEl.classList.remove("turn", "fade");
+          turnPageEl.classList.add("back-turn", "back-fade");
         }, delay);
       }
     }
@@ -64,127 +63,184 @@ export default function BookPage() {
       if (!oppositePageEl) return;
 
       if (i === opposite) {
-        oppositePageEl.classList.remove('invisible');
-        oppositePageEl.classList.add('visible');
+        oppositePageEl.classList.remove("invisible");
+        oppositePageEl.classList.add("visible");
         continue;
       }
-      oppositePageEl.classList.remove('visible');
-      oppositePageEl.classList.add('invisible');
-
+      oppositePageEl.classList.remove("visible");
+      oppositePageEl.classList.add("invisible");
     }
 
     // Wait for animation to complete
     setTimeout(() => {
       setCurrentPage(nextIndex);
-      console.log('Current page is now:', currentPage);
+      console.log("Current page is now:", currentPage);
       setIsTurning(false);
     }, 1000); // match your CSS animation duration
   };
 
   const handleBookmarkClick = (e, flip, opposite) => {
-  const el = e.currentTarget;
-  // Play click animation
-  el.classList.add('clicked');
-  setTimeout(() => el.classList.remove('clicked'), 400);
-  // Trigger turnPage function
-  turnPage(flip, opposite); // Testing turning to page 2
-};
+    const el = e.currentTarget;
+    // Play click animation
+    el.classList.add("clicked");
+    setTimeout(() => el.classList.remove("clicked"), 400);
+    // Trigger turnPage function
+    turnPage(flip, opposite); // Testing turning to page 2
+  };
 
   return (
     <section
-      className={`book-scene flex items-center justify-center h-screen transition-all duration-700 ${
-        appFullscreen ? 'bg-gray-950' : 'bg-gray-900'
+      className={`book-scene flex h-screen items-center justify-center transition-all duration-700 ${
+        appFullscreen ? "bg-gray-950" : "bg-gray-900"
       }`}
     >
-      <div className={`book transition-all duration-700 ${bookFullscreen ? 'fullscreen' : ''}`}>
+      <div
+        className={`book transition-all duration-700 ${bookFullscreen ? "fullscreen" : ""}`}
+      >
         <span className="page turn page-1">:3</span>
         <span className="page turn page-2">:3:3:3</span>
-        <span className="page turn page-3">:3:3:3:3
-          :3:3:3:3:3:3:3
-        </span>
-        <span className="page turn page-4">:3:3:3:3:3:3:3
-          :3:3:3:3:3:3:3
-          :3:3:3:3:3:3:3
+        <span className="page turn page-3">:3:3:3:3 :3:3:3:3:3:3:3</span>
+        <span className="page turn page-4">
+          :3:3:3:3:3:3:3 :3:3:3:3:3:3:3 :3:3:3:3:3:3:3
         </span>
         <span className="page turn page-5">:3</span>
         <span className="cover"></span>
         <span className="page page-6">Page 5</span>
         <span className="page page-7">Page 4</span>
-        <span className="page page-8">Page 3
+        <span className="page page-8">
+          Page 3
           {bookmarks
-          .filter(b => b.page === 8)
-          .map((b, i) => (
-            <div
-              key={i}
-              onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
-              className={`bookmark-container bookmark ${
-                bookFullscreen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-              }`}
-              style={{
-                top: b.y,
-              }}
-            >
-              <svg viewBox="0 0 300 100" preserveAspectRatio="none">
-                <polygon points="0,0 260,0 300,50 260,100 0,100" fill="#77425f" stroke="#5a2f49" strokeWidth="1" />
-                <polygon points="5,5 255,5 296,50 254,95 5,95" fill="none" stroke="white" strokeWidth="2" strokeDasharray="8,6" />
-                <text x="150" y="58" textAnchor="middle" fill="white" fontWeight="bold" fontFamily="sans-serif">
-                  {b.label}
-                </text>
-              </svg>
-            </div>
-          ))}
+            .filter((b) => b.page === 8)
+            .map((b, i) => (
+              <div
+                key={i}
+                onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
+                className={`bookmark-container bookmark ${
+                  bookFullscreen
+                    ? "opacity-100"
+                    : "pointer-events-none opacity-0"
+                }`}
+                style={{
+                  top: b.y,
+                }}
+              >
+                <svg viewBox="0 0 300 100" preserveAspectRatio="none">
+                  <polygon
+                    points="0,0 260,0 300,50 260,100 0,100"
+                    fill="#77425f"
+                    stroke="#5a2f49"
+                    strokeWidth="1"
+                  />
+                  <polygon
+                    points="5,5 255,5 296,50 254,95 5,95"
+                    fill="none"
+                    stroke="white"
+                    strokeWidth="2"
+                    strokeDasharray="8,6"
+                  />
+                  <text
+                    x="150"
+                    y="58"
+                    textAnchor="middle"
+                    fill="white"
+                    fontWeight="bold"
+                    fontFamily="sans-serif"
+                  >
+                    {b.label}
+                  </text>
+                </svg>
+              </div>
+            ))}
         </span>
         <span className="page page-9">
           Page 2
           {bookmarks
-          .filter(b => b.page === 9)
-          .map((b, i) => (
-            <div
-              key={i}
-              onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
-              className={`bookmark-container bookmark ${
-                bookFullscreen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-              }`}
-              style={{
-                top: b.y,
-              }}
-            >
-              <svg viewBox="0 0 300 100" preserveAspectRatio="none">
-                <polygon points="0,0 260,0 300,50 260,100 0,100" fill="#77425f" stroke="#5a2f49" strokeWidth="1" />
-                <polygon points="5,5 255,5 296,50 254,95 5,95" fill="none" stroke="white" strokeWidth="2" strokeDasharray="8,6" />
-                <text x="150" y="58" textAnchor="middle" fill="white" fontWeight="bold" fontFamily="sans-serif">
-                  {b.label}
-                </text>
-              </svg>
-            </div>
-          ))}
+            .filter((b) => b.page === 9)
+            .map((b, i) => (
+              <div
+                key={i}
+                onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
+                className={`bookmark-container bookmark ${
+                  bookFullscreen
+                    ? "opacity-100"
+                    : "pointer-events-none opacity-0"
+                }`}
+                style={{
+                  top: b.y,
+                }}
+              >
+                <svg viewBox="0 0 300 100" preserveAspectRatio="none">
+                  <polygon
+                    points="0,0 260,0 300,50 260,100 0,100"
+                    fill="#77425f"
+                    stroke="#5a2f49"
+                    strokeWidth="1"
+                  />
+                  <polygon
+                    points="5,5 255,5 296,50 254,95 5,95"
+                    fill="none"
+                    stroke="white"
+                    strokeWidth="2"
+                    strokeDasharray="8,6"
+                  />
+                  <text
+                    x="150"
+                    y="58"
+                    textAnchor="middle"
+                    fill="white"
+                    fontWeight="bold"
+                    fontFamily="sans-serif"
+                  >
+                    {b.label}
+                  </text>
+                </svg>
+              </div>
+            ))}
         </span>
         <span className="page page-10">
-          <span className="page-text">
-            Placeholder Text
-          </span>
+          <span className="page-text">Placeholder Text</span>
           {bookmarks
-          .filter(b => b.page === 10)
-          .map((b, i) => (
-            <div
-              key={i}
-              onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
-              className={`bookmark-container bookmark ${
-                bookFullscreen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-              }`}
-              style={{
-                top: b.y,
-              }}
-            >
-              <svg viewBox="0 0 300 100" preserveAspectRatio="none">
-                <polygon points="0,0 260,0 300,50 260,100 0,100" fill="#77425f" stroke="#5a2f49" strokeWidth="1" />
-                <polygon points="5,5 255,5 296,50 254,95 5,95" fill="none" stroke="white" strokeWidth="2" strokeDasharray="8,6" />
-                <text x="150" y="58" textAnchor="middle" fill="white" fontWeight="bold" fontFamily="sans-serif">
-                  {b.label}
-                </text>
-              </svg>
-            </div>
-          ))}
+            .filter((b) => b.page === 10)
+            .map((b, i) => (
+              <div
+                key={i}
+                onClick={(e) => handleBookmarkClick(e, b.page, b.opposite)}
+                className={`bookmark-container bookmark ${
+                  bookFullscreen
+                    ? "opacity-100"
+                    : "pointer-events-none opacity-0"
+                }`}
+                style={{
+                  top: b.y,
+                }}
+              >
+                <svg viewBox="0 0 300 100" preserveAspectRatio="none">
+                  <polygon
+                    points="0,0 260,0 300,50 260,100 0,100"
+                    fill="#77425f"
+                    stroke="#5a2f49"
+                    strokeWidth="1"
+                  />
+                  <polygon
+                    points="5,5 255,5 296,50 254,95 5,95"
+                    fill="none"
+                    stroke="white"
+                    strokeWidth="2"
+                    strokeDasharray="8,6"
+                  />
+                  <text
+                    x="150"
+                    y="58"
+                    textAnchor="middle"
+                    fill="white"
+                    fontWeight="bold"
+                    fontFamily="sans-serif"
+                  >
+                    {b.label}
+                  </text>
+                </svg>
+              </div>
+            ))}
         </span>
         <span className="page turn page-11">
           <span className="flipped-page-content">Placeholder Text</span>
@@ -195,10 +251,9 @@ export default function BookPage() {
         <span className="page turn page-13 invisible">
           <span className="flipped-page-content">Whoas</span>
         </span>
-        
+
         <span className="cover turn">Hello</span>
       </div>
-      
     </section>
   );
 }
diff --git a/front-end/pages/classroom.jsx b/front-end/pages/classroom.jsx
new file mode 100644
index 0000000..937d31a
--- /dev/null
+++ b/front-end/pages/classroom.jsx
@@ -0,0 +1,43 @@
+import classroombackground from "@/public/images/classroom-background.png";
+import Image from "next/image";
+import Question from "@/components/classroom/question";
+import yuumiPlaceholder from "@/public/images/Yuumi_BattlePrincipalSkin.webp";
+import Response from "@/components/classroom/response";
+import { motion } from "motion/react";
+
+const Classroom = () => {
+  return (
+    <div className="relative h-screen w-screen overflow-hidden bg-accent">
+      <Image
+        src={classroombackground}
+        className="animate-blur-delay w-full"
+        alt="background image"
+      />
+      <motion.div
+        initial={{ x: -100, opacity: 0 }}
+        animate={{ x: 0, opacity: 1 }}
+        transition={{ delay: 2.5 }}
+        className="absolute inset-y-1/3 left-10 z-10 w-1/5"
+      >
+        <Image src={yuumiPlaceholder} className="object-contain" alt="yuumi" />
+      </motion.div>
+
+      <div className="absolute bottom-10 z-10 flex w-full flex-col items-center">
+        <Question text={"question question question question question?"} />
+      </div>
+      <div className="absolute inset-y-1/3 right-20 z-10 flex w-full justify-end">
+        <Response
+          questionType={"shortAnswer"}
+          choices={[
+            "amazing answer choice",
+            "baller answer choice",
+            "really dumb and stupid answer choice",
+          ]}
+          question={"question question question question question?"}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Classroom;
diff --git a/front-end/pages/index.js b/front-end/pages/index.js
index 57bbdb1..70443a8 100644
--- a/front-end/pages/index.js
+++ b/front-end/pages/index.js
@@ -1,32 +1,32 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import Link from "next/link";
 
 export default function Home() {
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
 
   const handleChange = (event) => {
     setInputValue(event.target.value);
   };
 
   return (
-    <section className="fixed top-0 left-0 w-full h-full flex items-center justify-center overflow-hidden m-0 p-0">
+    <section className="fixed left-0 top-0 m-0 flex h-full w-full items-center justify-center overflow-hidden p-0">
       {/* Top and bottom background layers */}
       <div className="background-top"></div>
       <div className="background-bot"></div>
 
       {/* Content */}
-      <div className="z-10 bg-white/80 p-8 rounded-lg shadow-lg text-center">
-        <h1 className="text-4xl text-dark font-bold mb-4">Welcome!</h1>
+      <div className="z-10 rounded-lg bg-white/80 p-8 text-center shadow-lg">
+        <h1 className="mb-4 text-4xl font-bold text-dark">Welcome!</h1>
         <div className="mt-2 flex items-center space-x-2">
           <input
             type="text"
             value={inputValue}
             onChange={handleChange}
             placeholder="Enter text here"
-            className="p-2 border rounded-lg text-dark flex-1"
+            className="flex-1 rounded-lg border p-2 text-dark"
           />
           <Link href="/book" className="text-background hover:underline">
-            <button className="px-4 py-2 bg-[#8b6f4e] text-white rounded-lg hover:bg-[#73583f] transition">
+            <button className="rounded-lg bg-[#8b6f4e] px-4 py-2 text-white transition hover:bg-[#73583f]">
               Search
             </button>
           </Link>
diff --git a/front-end/public/images/classroom-background.png b/front-end/public/images/classroom-background.png
new file mode 100644
index 0000000..8ecbc60
Binary files /dev/null and b/front-end/public/images/classroom-background.png differ
diff --git a/front-end/styles/SplitBackground.css b/front-end/styles/SplitBackground.css
index a485a3a..cc363ba 100644
--- a/front-end/styles/SplitBackground.css
+++ b/front-end/styles/SplitBackground.css
@@ -20,7 +20,7 @@
   top: 0;
   width: 100%;
   height: 65%;
-  background-image: url('/images/Yuumi_BattlePrincipalSkin.webp');
+  background-image: url("/images/Yuumi_BattlePrincipalSkin.webp");
   background-color: var(--color-primary);
   background-position: center -100px;
 }
@@ -43,10 +43,14 @@
 
 .background-top::after {
   bottom: 0;
-  background: linear-gradient(to bottom, rgba(244,234,234,0) 70%, #F4EAEA 100%);
+  background: linear-gradient(
+    to bottom,
+    rgba(244, 234, 234, 0) 70%,
+    #f4eaea 100%
+  );
 }
 
 .background-bot::before {
   top: 0;
-  background: linear-gradient(to top, rgba(244,234,234,0) 70%, #F4EAEA 100%);
+  background: linear-gradient(to top, rgba(244, 234, 234, 0) 70%, #f4eaea 100%);
 }
diff --git a/front-end/styles/book.css b/front-end/styles/book.css
index eddffe8..5eb0c08 100644
--- a/front-end/styles/book.css
+++ b/front-end/styles/book.css
@@ -4,7 +4,7 @@
 }
 
 :root {
-  font-family: 'PixelText', serif;
+  font-family: "PixelText", serif;
   font-optical-sizing: auto;
   line-height: 1.5;
   font-weight: 400;
@@ -19,7 +19,7 @@
   -moz-osx-font-smoothing: grayscale;
   overflow: hidden;
 }
-.book-scene{
+.book-scene {
   position: relative;
 }
 .book {
@@ -71,7 +71,7 @@
 }
 
 .page {
-  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
+  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
   margin-top: 1.25%;
   width: 46.5%;
   height: 95%;
@@ -79,7 +79,7 @@
   text-align: right;
   font-size: 0.8vw;
   color: var(--color-dark);
-  font-family: 'PixelText', serif;
+  font-family: "PixelText", serif;
   transform-style: preserve-3d;
   will-change: transform;
   -webkit-font-smoothing: antialiased;
@@ -100,11 +100,11 @@
   transition-delay: 2s;
   pointer-events: none;
 }
-.page.turn.fade{
+.page.turn.fade {
   color: #e9e6c4;
   transition: color 0.8s ease;
 }
-.page.back-turn.back-fade{
+.page.back-turn.back-fade {
   color: var(--color-dark);
   transition: color 2.2s ease 1s;
 }
@@ -116,7 +116,7 @@
   transform: rotateY(-180deg);
   transform-style: preserve-3d;
 }
-.page-text{
+.page-text {
   font-size: 0.8vw;
 }
 
@@ -143,43 +143,74 @@
   color: #e9e6c4;
   animation: bookBackTurn 3s forwards;
 }
-.page:nth-of-type(1) { animation-delay: 0.05s; }
-.page:nth-of-type(2) { animation-delay: 0.33s; }
-.page:nth-of-type(3) { animation-delay: 0.66s; }
+.page:nth-of-type(1) {
+  animation-delay: 0.05s;
+}
+.page:nth-of-type(2) {
+  animation-delay: 0.33s;
+}
+.page:nth-of-type(3) {
+  animation-delay: 0.66s;
+}
 .page:nth-of-type(4) {
   animation: bookOpen150deg 3s forwards;
   animation-delay: 0.99s;
 }
 
-
 /* keyframes unchanged */
 @keyframes bookOpen {
-  30% { z-index: 999 }
-  100% { transform: rotateY(-180deg); z-index: 999; }
+  30% {
+    z-index: 999;
+  }
+  100% {
+    transform: rotateY(-180deg);
+    z-index: 999;
+  }
 }
 
 @keyframes bookCover {
-  30% { z-index: 999 }
-  100% { transform: rotateY(-180deg); z-index: 1; }
+  30% {
+    z-index: 999;
+  }
+  100% {
+    transform: rotateY(-180deg);
+    z-index: 1;
+  }
 }
 
 @keyframes bookClose {
-  30% { z-index: 999 }
-  100% { transform: rotateY(0deg); z-index: 999; }
+  30% {
+    z-index: 999;
+  }
+  100% {
+    transform: rotateY(0deg);
+    z-index: 999;
+  }
 }
 
 @keyframes bookOpen150deg {
-  30% { z-index: 999 }
-  100% { transform: rotateY(-210deg); z-index: 999; }
+  30% {
+    z-index: 999;
+  }
+  100% {
+    transform: rotateY(-210deg);
+    z-index: 999;
+  }
 }
 
 @keyframes bookBackTurn {
-  0%   { transform: rotateY(-180deg); z-index: 999; }
-  100% { transform: rotateY(0deg); z-index: 999; }
+  0% {
+    transform: rotateY(-180deg);
+    z-index: 999;
+  }
+  100% {
+    transform: rotateY(0deg);
+    z-index: 999;
+  }
 }
 
 .bookmark-container {
   z-index: 2;
   position: absolute;
   transform: translateX(200px);
-}
\ No newline at end of file
+}
diff --git a/front-end/styles/bookmark.css b/front-end/styles/bookmark.css
index 056af24..728d52a 100644
--- a/front-end/styles/bookmark.css
+++ b/front-end/styles/bookmark.css
@@ -2,7 +2,9 @@
   width: 300px;
   height: 100px;
   margin: 80px auto;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
   position: absolute;
   top: 50%;
   right: 1%; /* adjust based on your book’s width */
@@ -13,8 +15,8 @@
 }
 .bookmark:hover {
   transform: translateX(210px);
-  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
 }
 .bookmark:active {
   transform: translateX(212px) scale(0.95);
-}
\ No newline at end of file
+}
diff --git a/front-end/styles/button.css b/front-end/styles/button.css
index f564a8a..d8d122a 100644
--- a/front-end/styles/button.css
+++ b/front-end/styles/button.css
@@ -1,4 +1,4 @@
-/* From Uiverse.io by Subaashbala */ 
+/* From Uiverse.io by Subaashbala */
 button {
   display: flex;
   justify-content: space-around;
@@ -12,7 +12,10 @@ button {
   position: relative;
   overflow: hidden;
   z-index: 100;
-  transition: box-shadow 250ms, transform 250ms, filter 50ms;
+  transition:
+    box-shadow 250ms,
+    transform 250ms,
+    filter 50ms;
 }
 button:hover {
   transform: translate(2px, 2px);
@@ -59,7 +62,9 @@ button:hover::after {
   background-color: var(--color-primary);
   position: relative;
   overflow: hidden;
-  transition: transform 250ms, background-color 250ms;
+  transition:
+    transform 250ms,
+    background-color 250ms;
   z-index: 100;
 }
 .arrowContainer::after {
diff --git a/front-end/styles/classroom.css b/front-end/styles/classroom.css
new file mode 100644
index 0000000..e9a69b7
--- /dev/null
+++ b/front-end/styles/classroom.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  @keyframes blur-delay {
+    0%,
+    60% {
+      filter: blur(0);
+    }
+    100% {
+      filter: blur(8px);
+    }
+  }
+  .animate-blur-delay {
+    animation: blur-delay 3s forwards;
+  }
+}
diff --git a/front-end/styles/globals.css b/front-end/styles/globals.css
index 39ae619..7bc99c9 100644
--- a/front-end/styles/globals.css
+++ b/front-end/styles/globals.css
@@ -3,10 +3,10 @@
 @tailwind utilities;
 
 :root {
-  --color-primary: #78BCB0;
-  --color-accent: #B99758;
-  --color-background: #F4EAEA;
-  --color-dark: #56374E;
+  --color-primary: #78bcb0;
+  --color-accent: #b99758;
+  --color-background: #f4eaea;
+  --color-dark: #56374e;
 }
 
 html,
@@ -18,4 +18,4 @@ body {
   height: 100%;
   width: 100%;
   overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/front-end/tailwind.config.js b/front-end/tailwind.config.js
index 07397ab..7d2e884 100644
--- a/front-end/tailwind.config.js
+++ b/front-end/tailwind.config.js
@@ -1,18 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./pages/**/*.{js,jsx}",
-    "./components/**/*.{js,jsx}"
-  ],
+  content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"],
   theme: {
     extend: {
       colors: {
         primary: "#78BCB0",
-        accent: "B99758",
-        background: "F4EAEA",
-        dark: "56374E",
+        accent: "#B99758",
+        background: "#F4EAEA",
+        dark: "#56374E",
       },
     },
   },
   plugins: [],
-}
+};
diff --git a/front-end/vercel.json b/front-end/vercel.json
index a550227..5e75c27 100644
--- a/front-end/vercel.json
+++ b/front-end/vercel.json
@@ -1,6 +1,4 @@
 {
   "version": 2,
-  "builds": [
-    { "src": "next.config.js", "use": "@vercel/next" }
-  ]
+  "builds": [{ "src": "next.config.js", "use": "@vercel/next" }]
 }