diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 96c91baac..10ac41281 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -32,7 +32,7 @@ export default function PromptAreaComponent({
               <GenericModal
                 value={myValue}
                 buttonText="Check & Save"
-								modalTitle="Edit Prompt"
+                modalTitle="Edit Prompt"
                 setValue={(t: string) => {
                   setMyValue(t);
                   onChange(t);
@@ -53,7 +53,7 @@ export default function PromptAreaComponent({
               <GenericModal
                 value={myValue}
                 buttonText="Check & Save"
-								modalTitle="Edit Prompt"
+                modalTitle="Edit Prompt"
                 setValue={(t: string) => {
                   setMyValue(t);
                   onChange(t);
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index edc21f044..b4ec85fe3 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -24,7 +24,7 @@ export default function TextAreaComponent({
           onClick={() => {
             openPopUp(
               <GenericModal
-                buttonText="Finishing Editing" 
+                buttonText="Finishing Editing"
                 modalTitle="Edit Text"
                 value={myValue}
                 setValue={(t: string) => {
@@ -45,7 +45,7 @@ export default function TextAreaComponent({
           onClick={() => {
             openPopUp(
               <GenericModal
-                buttonText="Finishing Editing" 
+                buttonText="Finishing Editing"
                 modalTitle="Edit Text"
                 value={myValue}
                 setValue={(t: string) => {
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 7f2033164..b804803ea 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -6,156 +6,155 @@ import { darkContext } from "../../contexts/darkContext";
 import { checkPrompt } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 export default function PromptAreaModal({
-	value,
-	setValue,
-	buttonText,
-	modalTitle
+  value,
+  setValue,
+  buttonText,
+  modalTitle,
 }: {
-	setValue: (value: string) => void;
-	value: string;
-	buttonText: string;
-	modalTitle: string;
+  setValue: (value: string) => void;
+  value: string;
+  buttonText: string;
+  modalTitle: string;
 }) {
+  const [myButtonText, setmyButtonText] = useState(buttonText);
+  const [myModalTitle, setMyModalTitle] = useState(modalTitle);
+  const [open, setOpen] = useState(true);
+  const [myValue, setMyValue] = useState(value);
+  const { dark } = useContext(darkContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
+  const { closePopUp } = useContext(PopUpContext);
+  const ref = useRef();
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        closePopUp();
+      }, 300);
+    }
+  }
 
-	const [myButtonText, setmyButtonText] = useState(buttonText);
-	const [myModalTitle, setMyModalTitle] = useState(modalTitle);
-	const [open, setOpen] = useState(true);
-	const [myValue, setMyValue] = useState(value);
-	const { dark } = useContext(darkContext);
-	const { setErrorData, setSuccessData } = useContext(alertContext);
-	const { closePopUp } = useContext(PopUpContext);
-	const ref = useRef();
-	function setModalOpen(x: boolean) {
-		setOpen(x);
-		if (x === false) {
-			setTimeout(() => {
-				closePopUp();
-			}, 300);
-		}
-	}
+  return (
+    <Transition.Root show={open} appear={true} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={setModalOpen}
+        initialFocus={ref}
+      >
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
 
-	return (
-		<Transition.Root show={open} appear={true} as={Fragment}>
-			<Dialog
-				as="div"
-				className="relative z-10"
-				onClose={setModalOpen}
-				initialFocus={ref}
-			>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0"
-				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-				</Transition.Child>
-
-				<div className="fixed inset-0 z-10 overflow-y-auto">
-					<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-							enterTo="opacity-100 translate-y-0 sm:scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-								<button
-										type="button"
-										className="rounded-md text-gray-400 hover:text-gray-500"
-										onClick={() => {
-											setModalOpen(false);
-										}}
-									>
-										<span className="sr-only">Close</span>
-										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
-									</button>
-								</div>
-								<div className="h-full w-full flex flex-col justify-center items-center">
-									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-											<DocumentTextIcon
-												className="h-6 w-6 text-blue-600"
-												aria-hidden="true"
-											/>
-										</div>
-										<div className="mt-4 text-center sm:ml-4 sm:text-left">
-											<Dialog.Title
-												as="h3"
-												className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-											>
-												{myModalTitle}
-											</Dialog.Title>
-										</div>
-									</div>
-									<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-										<div className="flex h-full w-full">
-											<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
-												<textarea
-													ref={ref}
-													className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
-													value={myValue}
-													onChange={(e) => {
-														setMyValue(e.target.value);
-														setValue(e.target.value);
-													}}
-												/>
-											</div>
-										</div>
-									</div>
-									<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-										<button
-											type="button"
-											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
-											onClick={() => {
-												checkPrompt(myValue)
-													.then((apiReturn) => {
-														if (apiReturn.data) {
-															let inputVariables =
-																apiReturn.data.input_variables;
-															if (inputVariables.length === 0) {
-																setErrorData({
-																	title:
-																		"The template you are attempting to use does not contain any variables for data entry.",
-																});
-															} else {
-																setSuccessData({
-																	title: "Prompt is ready",
-																});
-																setModalOpen(false);
-																setValue(myValue);
-															}
-														} else {
-															setErrorData({
-																title: "Something went wrong, please try again",
-															});
-														}
-													})
-													.catch((error) => {
-														return setErrorData({
-															title:
-																"There is something wrong with this prompt, please review it",
-															list: [error.response.data.detail],
-														});
-													});
-											}}
-										>
-											{myButtonText}
-										</button>
-									</div>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
-}
\ No newline at end of file
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </div>
+                <div className="h-full w-full flex flex-col justify-center items-center">
+                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
+                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
+                      <DocumentTextIcon
+                        className="h-6 w-6 text-blue-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
+                      >
+                        {myModalTitle}
+                      </Dialog.Title>
+                    </div>
+                  </div>
+                  <div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+                    <div className="flex h-full w-full">
+                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
+                        <textarea
+                          ref={ref}
+                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+                          value={myValue}
+                          onChange={(e) => {
+                            setMyValue(e.target.value);
+                            setValue(e.target.value);
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
+                    <button
+                      type="button"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={() => {
+                        checkPrompt(myValue)
+                          .then((apiReturn) => {
+                            if (apiReturn.data) {
+                              let inputVariables =
+                                apiReturn.data.input_variables;
+                              if (inputVariables.length === 0) {
+                                setErrorData({
+                                  title:
+                                    "The template you are attempting to use does not contain any variables for data entry.",
+                                });
+                              } else {
+                                setSuccessData({
+                                  title: "Prompt is ready",
+                                });
+                                setModalOpen(false);
+                                setValue(myValue);
+                              }
+                            } else {
+                              setErrorData({
+                                title: "Something went wrong, please try again",
+                              });
+                            }
+                          })
+                          .catch((error) => {
+                            return setErrorData({
+                              title:
+                                "There is something wrong with this prompt, please review it",
+                              list: [error.response.data.detail],
+                            });
+                          });
+                      }}
+                    >
+                      {myButtonText}
+                    </button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}