diff --git a/src/components/Generation/fill.blanks.edit.tsx b/src/components/Generation/fill.blanks.edit.tsx
new file mode 100644
index 00000000..c2210093
--- /dev/null
+++ b/src/components/Generation/fill.blanks.edit.tsx
@@ -0,0 +1,84 @@
+import { FillBlanksExercise } from "@/interfaces/exam";
+import React from "react";
+import Input from "@/components/Low/Input";
+
+interface Props {
+  exercise: FillBlanksExercise;
+  updateExercise: (data: any) => void;
+}
+
+const FillBlanksEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <Input
+        type="text"
+        label="Text"
+        name="text"
+        required
+        value={exercise.text}
+        onChange={(value) =>
+          updateExercise({
+            text: value,
+          })
+        }
+      />
+      <h1>Solutions</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.solutions.map((solution, index) => (
+          <div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
+            <Input
+              type="text"
+              label={`Solution ${index + 1}`}
+              name="solution"
+              required
+              value={solution.solution}
+              onChange={(value) =>
+                updateExercise({
+                  solutions: exercise.solutions.map((sol) =>
+                    sol.id === solution.id ? { ...sol, solution: value } : sol
+                  ),
+                })
+              }
+            />
+          </div>
+        ))}
+      </div>
+      <h1>Words</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.words.map((word, index) => (
+          <div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
+            <Input
+              type="text"
+              label={`Word ${index + 1}`}
+              name="word"
+              required
+              value={word}
+              onChange={(value) =>
+                updateExercise({
+                  words: exercise.words.map((sol, idx) =>
+                    index === idx ? value : sol
+                  ),
+                })
+              }
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default FillBlanksEdit;
diff --git a/src/components/Generation/interactive.speaking.edit.tsx b/src/components/Generation/interactive.speaking.edit.tsx
new file mode 100644
index 00000000..351f8b4b
--- /dev/null
+++ b/src/components/Generation/interactive.speaking.edit.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const InteractiveSpeakingEdit = () => {
+  return null;
+};
+
+export default InteractiveSpeakingEdit;
diff --git a/src/components/Generation/match.sentences.edit.tsx b/src/components/Generation/match.sentences.edit.tsx
new file mode 100644
index 00000000..a4027a2e
--- /dev/null
+++ b/src/components/Generation/match.sentences.edit.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MatchSentencesEdit = () => {
+    return null;
+}
+
+export default MatchSentencesEdit;
\ No newline at end of file
diff --git a/src/components/Generation/multiple.choice.edit.tsx b/src/components/Generation/multiple.choice.edit.tsx
new file mode 100644
index 00000000..d943aed5
--- /dev/null
+++ b/src/components/Generation/multiple.choice.edit.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MultipleChoiceEdit = () => {
+    return null;
+}
+
+export default MultipleChoiceEdit;
\ No newline at end of file
diff --git a/src/components/Generation/speaking.edit.tsx b/src/components/Generation/speaking.edit.tsx
new file mode 100644
index 00000000..a5649371
--- /dev/null
+++ b/src/components/Generation/speaking.edit.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const SpeakingEdit = () => {
+    return null;
+}
+
+export default SpeakingEdit;
\ No newline at end of file
diff --git a/src/components/Generation/true.false.edit.tsx b/src/components/Generation/true.false.edit.tsx
new file mode 100644
index 00000000..2a9281d2
--- /dev/null
+++ b/src/components/Generation/true.false.edit.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { TrueFalseExercise } from "@/interfaces/exam";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
+interface Props {
+  exercise: TrueFalseExercise;
+  updateExercise: (data: any) => void;
+}
+
+const options = [
+  { value: "true", label: "True" },
+  { value: "false", label: "False" },
+  { value: "not_given", label: "Not Given" },
+];
+
+const TrueFalseEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <h1>Questions</h1>
+      <div className="w-full flex-no-wrap -mx-2">
+        {exercise.questions.map((question, index) => (
+          <div key={question.id} className="flex w-full px-2">
+            <Input
+              type="text"
+              label={`Question ${index + 1}`}
+              name="question"
+              required
+              value={question.prompt}
+              onChange={(value) =>
+                updateExercise({
+                  questions: exercise.questions.map((sol) =>
+                    sol.id === question.id ? { ...sol, prompt: value } : sol
+                  ),
+                })
+              }
+            />
+            <div className="w-48 flex items-end px-2">
+              <Select
+                value={options.find((o) => o.value === question.solution)}
+                options={options}
+                onChange={(value) => {
+                  updateExercise({
+                    questions: exercise.questions.map((sol) =>
+                      sol.id === question.id ? { ...sol, solution: value?.value } : sol
+                    ),
+                  });
+                }}
+                className="h-18"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default TrueFalseEdit;
diff --git a/src/components/Generation/white.blanks.edit.tsx b/src/components/Generation/white.blanks.edit.tsx
new file mode 100644
index 00000000..9bf8ce63
--- /dev/null
+++ b/src/components/Generation/white.blanks.edit.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const WhiteBlankEdits = () => {
+    return null;
+}
+
+export default WhiteBlankEdits;
\ No newline at end of file
diff --git a/src/components/Generation/writing.edit.tsx b/src/components/Generation/writing.edit.tsx
new file mode 100644
index 00000000..146f92bd
--- /dev/null
+++ b/src/components/Generation/writing.edit.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const WritingEdit = () => {
+    return null;
+}
+
+export default WritingEdit;
\ No newline at end of file
diff --git a/src/pages/(generation)/ReadingGeneration.tsx b/src/pages/(generation)/ReadingGeneration.tsx
index a49d9676..a4581a2e 100644
--- a/src/pages/(generation)/ReadingGeneration.tsx
+++ b/src/pages/(generation)/ReadingGeneration.tsx
@@ -1,315 +1,450 @@
 import Input from "@/components/Low/Input";
 import Select from "@/components/Low/Select";
-import {Difficulty, ReadingExam, ReadingPart} from "@/interfaces/exam";
+import {
+  Difficulty,
+  Exercise,
+  ReadingExam,
+  ReadingPart,
+} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
-import {getExamById} from "@/utils/exams";
-import {playSound} from "@/utils/sound";
-import {convertCamelCaseToReadable} from "@/utils/string";
-import {Tab} from "@headlessui/react";
+import { getExamById } from "@/utils/exams";
+import { playSound } from "@/utils/sound";
+import { convertCamelCaseToReadable } from "@/utils/string";
+import { Tab } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, sample} from "lodash";
-import {useRouter} from "next/router";
-import {useEffect, useState} from "react";
-import {BsArrowRepeat, BsCheck} from "react-icons/bs";
-import {toast} from "react-toastify";
-import {v4} from "uuid";
+import { capitalize, sample } from "lodash";
+import { useRouter } from "next/router";
+import { useEffect, useState, Dispatch, SetStateAction } from "react";
+import { BsArrowRepeat, BsCheck } from "react-icons/bs";
+import { toast } from "react-toastify";
+import { v4 } from "uuid";
+import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
+import TrueFalseEdit from "@/components/Generation/true.false.edit";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
 const PartTab = ({
-	part,
-	types,
-	difficulty,
-	index,
-	setPart,
+  part,
+  types,
+  difficulty,
+  index,
+  setPart,
+  updatePart,
 }: {
-	part?: ReadingPart;
-	types: string[];
-	index: number;
-	difficulty: Difficulty;
-	setPart: (part?: ReadingPart) => void;
+  part?: ReadingPart;
+  types: string[];
+  index: number;
+  difficulty: Difficulty;
+  setPart: (part?: ReadingPart) => void;
+  updatePart: Dispatch<SetStateAction<ReadingPart | undefined>>;
+  // updatePart: (updater: (part: ReadingPart) => ReadingPart) => void;
 }) => {
-	const [topic, setTopic] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
+  const [topic, setTopic] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
-	const generate = () => {
-		const url = new URLSearchParams();
-		url.append("difficulty", difficulty);
+  const generate = () => {
+    const url = new URLSearchParams();
+    url.append("difficulty", difficulty);
 
-		if (topic) url.append("topic", topic);
-		if (types) types.forEach((t) => url.append("exercises", t));
+    if (topic) url.append("topic", topic);
+    if (types) types.forEach((t) => url.append("exercises", t));
 
-		setPart(undefined);
-		setIsLoading(true);
-		axios
-			.get(`/api/exam/reading/generate/reading_passage_${index}${topic || types ? `?${url.toString()}` : ""}`)
-			.then((result) => {
-				playSound(typeof result.data === "string" ? "error" : "check");
-				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
-				setPart(result.data);
-			})
-			.catch((error) => {
-				console.log(error);
-				toast.error("Something went wrong!");
-			})
-			.finally(() => setIsLoading(false));
-	};
+    setPart(undefined);
+    setIsLoading(true);
+    axios
+      .get(
+        `/api/exam/reading/generate/reading_passage_${index}${
+          topic || types ? `?${url.toString()}` : ""
+        }`
+      )
+      .then((result) => {
+        playSound(typeof result.data === "string" ? "error" : "check");
+        if (typeof result.data === "string")
+          return toast.error(
+            "Something went wrong, please try to generate again."
+          );
+        setPart(result.data);
+      })
+      .catch((error) => {
+        console.log(error);
+        toast.error("Something went wrong!");
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	return (
-		<Tab.Panel className="w-full bg-ielts-reading/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
-			<div className="flex gap-4 items-end">
-				<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
-				<button
-					onClick={generate}
-					disabled={isLoading || types.length === 0}
-					data-tip="The passage is currently being generated"
-					className={clsx(
-						"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px]",
-						"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
-						"transition ease-in-out duration-300",
-						isLoading && "tooltip",
-					)}>
-					{isLoading ? (
-						<div className="flex items-center justify-center">
-							<BsArrowRepeat className="text-white animate-spin" size={25} />
-						</div>
-					) : (
-						"Generate"
-					)}
-				</button>
-			</div>
-			{isLoading && (
-				<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
-					<span className={clsx("loading loading-infinity w-32 text-ielts-reading")} />
-					<span className={clsx("font-bold text-2xl text-ielts-reading")}>Generating...</span>
-				</div>
-			)}
-			{part && (
-				<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
-					<div className="flex gap-4">
-						{part.exercises.map((x) => (
-							<span className="rounded-xl bg-white border border-ielts-reading p-1 px-4" key={x.id}>
-								{x.type && convertCamelCaseToReadable(x.type)}
-							</span>
-						))}
-					</div>
-					<h3 className="text-xl font-semibold">{part.text.title}</h3>
-					<span className="w-full h-96">{part.text.content}</span>
-				</div>
-			)}
-		</Tab.Panel>
-	);
+  const renderExercises = () => {
+    return part?.exercises.map((exercise) => {
+      switch (exercise.type) {
+        case "fillBlanks":
+          return (
+            <>
+              <h1>Exercise: Fill Blanks</h1>
+              <FillBlanksEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) =>
+                  updatePart((part?: ReadingPart) => {
+                    if (part) {
+                      const exercises = part.exercises.map((x) =>
+                        x.id === exercise.id ? { ...x, ...data } : x
+                      ) as Exercise[];
+                      const updatedPart = { ...part, exercises } as ReadingPart;
+                      return updatedPart;
+                    }
+                  })
+                }
+              />
+            </>
+          );
+        case "trueFalse":
+          return (
+            <>
+              <h1>Exercise: True or False</h1>
+              <TrueFalseEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) => {
+                  updatePart((part?: ReadingPart) => {
+                    if (part) {
+                      return {
+                        ...part,
+                        exercises: part.exercises.map((x) =>
+                          x.id === exercise.id ? { ...x, ...data } : x
+                        ),
+                      } as ReadingPart;
+                    }
+                  });
+                }}
+              />
+            </>
+          );
+        default:
+          return null;
+      }
+    });
+  };
+
+  return (
+    <Tab.Panel className="w-full bg-ielts-reading/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+      <div className="flex gap-4 items-end">
+        <Input
+          type="text"
+          placeholder="Grand Canyon..."
+          name="topic"
+          label="Topic"
+          onChange={setTopic}
+          roundness="xl"
+          defaultValue={topic}
+        />
+        <button
+          onClick={generate}
+          disabled={isLoading || types.length === 0}
+          data-tip="The passage is currently being generated"
+          className={clsx(
+            "bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px]",
+            "hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
+            "transition ease-in-out duration-300",
+            isLoading && "tooltip"
+          )}
+        >
+          {isLoading ? (
+            <div className="flex items-center justify-center">
+              <BsArrowRepeat className="text-white animate-spin" size={25} />
+            </div>
+          ) : (
+            "Generate"
+          )}
+        </button>
+      </div>
+      {isLoading && (
+        <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
+          <span
+            className={clsx("loading loading-infinity w-32 text-ielts-reading")}
+          />
+          <span className={clsx("font-bold text-2xl text-ielts-reading")}>
+            Generating...
+          </span>
+        </div>
+      )}
+      {part && (
+        <>
+          <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
+            <div className="flex gap-4">
+              {part.exercises.map((x) => (
+                <span
+                  className="rounded-xl bg-white border border-ielts-reading p-1 px-4"
+                  key={x.id}
+                >
+                  {x.type && convertCamelCaseToReadable(x.type)}
+                </span>
+              ))}
+            </div>
+            <h3 className="text-xl font-semibold">{part.text.title}</h3>
+            <span className="w-full h-96">{part.text.content}</span>
+          </div>
+          {renderExercises()}
+        </>
+      )}
+    </Tab.Panel>
+  );
 };
 
 const ReadingGeneration = () => {
-	const [part1, setPart1] = useState<ReadingPart>();
-	const [part2, setPart2] = useState<ReadingPart>();
-	const [part3, setPart3] = useState<ReadingPart>();
-	const [minTimer, setMinTimer] = useState(60);
-	const [types, setTypes] = useState<string[]>([]);
-	const [isLoading, setIsLoading] = useState(false);
-	const [resultingExam, setResultingExam] = useState<ReadingExam>();
-	const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
+  const [part1, setPart1] = useState<ReadingPart>();
+  const [part2, setPart2] = useState<ReadingPart>();
+  const [part3, setPart3] = useState<ReadingPart>();
+  const [minTimer, setMinTimer] = useState(60);
+  const [types, setTypes] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [resultingExam, setResultingExam] = useState<ReadingExam>();
+  const [difficulty, setDifficulty] = useState<Difficulty>(
+    sample(DIFFICULTIES)!
+  );
 
-	useEffect(() => {
-		const parts = [part1, part2, part3].filter((x) => !!x);
-		setMinTimer(parts.length === 0 ? 60 : parts.length * 20);
-	}, [part1, part2, part3]);
+  useEffect(() => {
+    const parts = [part1, part2, part3].filter((x) => !!x);
+    setMinTimer(parts.length === 0 ? 60 : parts.length * 20);
+  }, [part1, part2, part3]);
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const setExams = useExamStore((state) => state.setExams);
-	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+  const setExams = useExamStore((state) => state.setExams);
+  const setSelectedModules = useExamStore((state) => state.setSelectedModules);
 
-	const availableTypes = [
-		{type: "fillBlanks", label: "Fill the Blanks"},
-		{type: "trueFalse", label: "True or False"},
-		{type: "writeBlanks", label: "Write the Blanks"},
-		{type: "matchSentences", label: "Match Sentences"},
-	];
+  const availableTypes = [
+    { type: "fillBlanks", label: "Fill the Blanks" },
+    { type: "trueFalse", label: "True or False" },
+    { type: "writeBlanks", label: "Write the Blanks" },
+    { type: "matchSentences", label: "Match Sentences" },
+  ];
 
-	const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
+  const toggleType = (type: string) =>
+    setTypes((prev) =>
+      prev.includes(type)
+        ? [...prev.filter((x) => x !== type)]
+        : [...prev, type]
+    );
 
-	const loadExam = async (examId: string) => {
-		const exam = await getExamById("reading", examId.trim());
-		if (!exam) {
-			toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
-				toastId: "invalid-exam-id",
-			});
+  const loadExam = async (examId: string) => {
+    const exam = await getExamById("reading", examId.trim());
+    if (!exam) {
+      toast.error(
+        "Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
+        {
+          toastId: "invalid-exam-id",
+        }
+      );
 
-			return;
-		}
+      return;
+    }
 
-		setExams([exam]);
-		setSelectedModules(["reading"]);
+    setExams([exam]);
+    setSelectedModules(["reading"]);
 
-		router.push("/exercises");
-	};
+    router.push("/exercises");
+  };
 
-	const submitExam = () => {
-		const parts = [part1, part2, part3].filter((x) => !!x) as ReadingPart[];
-		if (parts.length === 0) {
-			toast.error("Please generate at least one passage before submitting");
-			return;
-		}
+  const submitExam = () => {
+    const parts = [part1, part2, part3].filter((x) => !!x) as ReadingPart[];
+    if (parts.length === 0) {
+      toast.error("Please generate at least one passage before submitting");
+      return;
+    }
 
-		setIsLoading(true);
-		const exam: ReadingExam = {
-			parts,
-			isDiagnostic: false,
-			minTimer,
-			module: "reading",
-			id: v4(),
-			type: "academic",
-			variant: parts.length === 3 ? "full" : "partial",
-			difficulty,
-		};
+    setIsLoading(true);
+    const exam: ReadingExam = {
+      parts,
+      isDiagnostic: false,
+      minTimer,
+      module: "reading",
+      id: v4(),
+      type: "academic",
+      variant: parts.length === 3 ? "full" : "partial",
+      difficulty,
+    };
 
-		axios
-			.post(`/api/exam/reading`, exam)
-			.then((result) => {
-				playSound("sent");
-				console.log(`Generated Exam ID: ${result.data.id}`);
-				toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
-				setResultingExam(result.data);
+    axios
+      .post(`/api/exam/reading`, exam)
+      .then((result) => {
+        playSound("sent");
+        console.log(`Generated Exam ID: ${result.data.id}`);
+        toast.success(
+          "This new exam has been generated successfully! Check the ID in our browser's console."
+        );
+        setResultingExam(result.data);
 
-				setPart1(undefined);
-				setPart2(undefined);
-				setPart3(undefined);
-				setDifficulty(sample(DIFFICULTIES)!);
-				setMinTimer(60);
-				setTypes([]);
-			})
-			.catch((error) => {
-				console.log(error);
-				toast.error("Something went wrong while generating, please try again later.");
-			})
-			.finally(() => setIsLoading(false));
-	};
+        setPart1(undefined);
+        setPart2(undefined);
+        setPart3(undefined);
+        setDifficulty(sample(DIFFICULTIES)!);
+        setMinTimer(60);
+        setTypes([]);
+      })
+      .catch((error) => {
+        console.log(error);
+        toast.error(
+          "Something went wrong while generating, please try again later."
+        );
+      })
+      .finally(() => setIsLoading(false));
+  };
 
-	return (
-		<>
-			<div className="flex gap-4 w-1/2">
-				<div className="flex flex-col gap-3">
-					<label className="font-normal text-base text-mti-gray-dim">Timer</label>
-					<Input
-						type="number"
-						name="minTimer"
-						onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
-						value={minTimer}
-						className="max-w-[300px]"
-					/>
-				</div>
-				<div className="flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
-					<Select
-						options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
-						onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
-						value={{value: difficulty, label: capitalize(difficulty)}}
-						disabled={!!part1 || !!part2 || !!part3}
-					/>
-				</div>
-			</div>
+  return (
+    <>
+      <div className="flex gap-4 w-1/2">
+        <div className="flex flex-col gap-3">
+          <label className="font-normal text-base text-mti-gray-dim">
+            Timer
+          </label>
+          <Input
+            type="number"
+            name="minTimer"
+            onChange={(e) => setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
+            value={minTimer}
+            className="max-w-[300px]"
+          />
+        </div>
+        <div className="flex flex-col gap-3 w-full">
+          <label className="font-normal text-base text-mti-gray-dim">
+            Difficulty
+          </label>
+          <Select
+            options={DIFFICULTIES.map((x) => ({
+              value: x,
+              label: capitalize(x),
+            }))}
+            onChange={(value) =>
+              value ? setDifficulty(value.value as Difficulty) : null
+            }
+            value={{ value: difficulty, label: capitalize(difficulty) }}
+            disabled={!!part1 || !!part2 || !!part3}
+          />
+        </div>
+      </div>
 
-			<div className="flex flex-col gap-3">
-				<label className="font-normal text-base text-mti-gray-dim">Exercises</label>
-				<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
-					{availableTypes.map((x) => (
-						<span
-							onClick={() => toggleType(x.type)}
-							key={x.type}
-							className={clsx(
-								"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-								"transition duration-300 ease-in-out",
-								!types.includes(x.type) ? "bg-white border-mti-gray-platinum" : "bg-ielts-reading/70 border-ielts-reading text-white",
-							)}>
-							{x.label}
-						</span>
-					))}
-				</div>
-			</div>
+      <div className="flex flex-col gap-3">
+        <label className="font-normal text-base text-mti-gray-dim">
+          Exercises
+        </label>
+        <div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
+          {availableTypes.map((x) => (
+            <span
+              onClick={() => toggleType(x.type)}
+              key={x.type}
+              className={clsx(
+                "px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+                "transition duration-300 ease-in-out",
+                !types.includes(x.type)
+                  ? "bg-white border-mti-gray-platinum"
+                  : "bg-ielts-reading/70 border-ielts-reading text-white"
+              )}
+            >
+              {x.label}
+            </span>
+          ))}
+        </div>
+      </div>
 
-			<Tab.Group>
-				<Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">
-					<Tab
-						className={({selected}) =>
-							clsx(
-								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
-								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
-								"transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
-							)
-						}>
-						Passage 1 {part1 && <BsCheck />}
-					</Tab>
-					<Tab
-						className={({selected}) =>
-							clsx(
-								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
-								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
-								"transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
-							)
-						}>
-						Passage 2 {part2 && <BsCheck />}
-					</Tab>
-					<Tab
-						className={({selected}) =>
-							clsx(
-								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
-								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
-								"transition duration-300 ease-in-out",
-								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
-							)
-						}>
-						Passage 3 {part3 && <BsCheck />}
-					</Tab>
-				</Tab.List>
-				<Tab.Panels>
-					{[
-						{part: part1, setPart: setPart1},
-						{part: part2, setPart: setPart2},
-						{part: part3, setPart: setPart3},
-					].map(({part, setPart}, index) => (
-						<PartTab part={part} types={types} difficulty={difficulty} index={index + 1} key={index} setPart={setPart} />
-					))}
-				</Tab.Panels>
-			</Tab.Group>
-			<div className="w-full flex justify-end gap-4">
-				{resultingExam && (
-					<button
-						disabled={isLoading}
-						onClick={() => loadExam(resultingExam.id)}
-						className={clsx(
-							"bg-white border border-ielts-reading text-ielts-reading w-full max-w-[200px] rounded-xl h-[70px] self-end",
-							"hover:bg-ielts-reading hover:text-white disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
-							"transition ease-in-out duration-300",
-						)}>
-						Perform Exam
-					</button>
-				)}
-				<button
-					disabled={(!part1 && !part2 && !part3) || isLoading}
-					data-tip="Please generate all three passages"
-					onClick={submitExam}
-					className={clsx(
-						"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
-						"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
-						"transition ease-in-out duration-300",
-						!part1 && !part2 && !part3 && "tooltip",
-					)}>
-					{isLoading ? (
-						<div className="flex items-center justify-center">
-							<BsArrowRepeat className="text-white animate-spin" size={25} />
-						</div>
-					) : (
-						"Submit"
-					)}
-				</button>
-			</div>
-		</>
-	);
+      <Tab.Group>
+        <Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">
+          <Tab
+            className={({ selected }) =>
+              clsx(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
+                "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
+                "transition duration-300 ease-in-out",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
+              )
+            }
+          >
+            Passage 1 {part1 && <BsCheck />}
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              clsx(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
+                "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
+                "transition duration-300 ease-in-out",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
+              )
+            }
+          >
+            Passage 2 {part2 && <BsCheck />}
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              clsx(
+                "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
+                "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
+                "transition duration-300 ease-in-out",
+                selected
+                  ? "bg-white shadow"
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
+              )
+            }
+          >
+            Passage 3 {part3 && <BsCheck />}
+          </Tab>
+        </Tab.List>
+        <Tab.Panels>
+          {[
+            { part: part1, setPart: setPart1 },
+            { part: part2, setPart: setPart2 },
+            { part: part3, setPart: setPart3 },
+          ].map(({ part, setPart }, index) => (
+            <PartTab
+              part={part}
+              types={types}
+              difficulty={difficulty}
+              index={index + 1}
+              key={index}
+              setPart={setPart}
+              updatePart={setPart}
+            />
+          ))}
+        </Tab.Panels>
+      </Tab.Group>
+      <div className="w-full flex justify-end gap-4">
+        {resultingExam && (
+          <button
+            disabled={isLoading}
+            onClick={() => loadExam(resultingExam.id)}
+            className={clsx(
+              "bg-white border border-ielts-reading text-ielts-reading w-full max-w-[200px] rounded-xl h-[70px] self-end",
+              "hover:bg-ielts-reading hover:text-white disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
+              "transition ease-in-out duration-300"
+            )}
+          >
+            Perform Exam
+          </button>
+        )}
+        <button
+          disabled={(!part1 && !part2 && !part3) || isLoading}
+          data-tip="Please generate all three passages"
+          onClick={submitExam}
+          className={clsx(
+            "bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
+            "hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
+            "transition ease-in-out duration-300",
+            !part1 && !part2 && !part3 && "tooltip"
+          )}
+        >
+          {isLoading ? (
+            <div className="flex items-center justify-center">
+              <BsArrowRepeat className="text-white animate-spin" size={25} />
+            </div>
+          ) : (
+            "Submit"
+          )}
+        </button>
+      </div>
+    </>
+  );
 };
 
 export default ReadingGeneration;