diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 95de0a125..3d122066a 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -4,15 +4,7 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
+import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
 import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
@@ -28,6 +20,7 @@ import {
   regexHighlight,
   varHighlightHTML,
 } from "../../utils";
+import BaseModal from "../baseModal";
 
 export default function GenericModal({
   field_name = "",
@@ -162,133 +155,128 @@ export default function GenericModal({
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
-      <DialogTrigger></DialogTrigger>
-      <DialogContent className="min-w-[80vw] gap-2">
-        <DialogHeader>
-          <DialogTitle className="flex items-center">
-            <span className="pr-2">{myModalTitle}</span>
-            <FileText
-              strokeWidth={1.5}
-              className="h-6 w-6 pl-1 text-primary "
-              aria-hidden="true"
-            />
-          </DialogTitle>
-          <DialogDescription>
-            {(() => {
-              switch (myModalTitle) {
-                case "Edit Text":
-                  return TEXT_DIALOG_SUBTITLE;
+    <BaseModal open={true} setOpen={setModalOpen}>
+      <BaseModal.Header
+        description={(() => {
+          switch (myModalTitle) {
+            case "Edit Text":
+              return TEXT_DIALOG_SUBTITLE;
 
-                case "Edit Prompt":
-                  return PROMPT_DIALOG_SUBTITLE;
+            case "Edit Prompt":
+              return PROMPT_DIALOG_SUBTITLE;
 
-                default:
-                  return null;
-              }
-            })()}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div
-          className={classNames(
-            !isEdit ? "rounded-lg border" : "",
-            "mt-2 flex h-[55vh] w-full"
-          )}
-        >
-          {type === TypeModal.PROMPT && isEdit ? (
-            <Textarea
-              ref={ref}
-              className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
-              value={inputValue}
-              onBlur={() => {
-                setIsEdit(false);
-              }}
-              autoFocus
-              onChange={(e) => {
-                setInputValue(e.target.value);
-                checkVariables(e.target.value);
-              }}
-              placeholder="Type message here."
-            />
-          ) : type === TypeModal.PROMPT && !isEdit ? (
-            <TextAreaContentView />
-          ) : type !== TypeModal.PROMPT ? (
-            <Textarea
-              ref={ref}
-              className="form-input h-full w-full rounded-lg focus-visible:ring-1"
-              value={inputValue}
-              onChange={(e) => {
-                setInputValue(e.target.value);
-              }}
-              placeholder="Type message here."
-            />
-          ) : (
-            <></>
-          )}
-        </div>
-
-        {type === TypeModal.PROMPT && (
-          <>
-            <div className="sm:6/6 mr-28 mt-3 max-h-20 overflow-y-auto custom-scroll">
-              <div className="flex flex-wrap items-center">
-                <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-                <span className="text-md font-semibold text-primary">
-                  Input Variables:
-                </span>
-
-                {wordsHighlight.map((word, index) => (
-                  <ShadTooltip
-                    key={getRandomKeyByssmm() + index}
-                    content={word.replace(/[{}]/g, "")}
-                    asChild={false}
-                  >
-                    <Badge
-                      key={index}
-                      variant="gray"
-                      size="md"
-                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
-                    >
-                      <div className="relative bottom-[1px]">
-                        <span>
-                          {word.replace(/[{}]/g, "").length > 59
-                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                            : word.replace(/[{}]/g, "")}
-                        </span>
-                      </div>
-                    </Badge>
-                  </ShadTooltip>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        <DialogFooter>
-          <Button
-            className="mt-3"
-            onClick={() => {
-              switch (myModalType) {
-                case 1:
-                  setValue(inputValue);
-                  setModalOpen(false);
-                  break;
-                case 2:
-                  !inputValue || inputValue === ""
-                    ? setModalOpen(false)
-                    : validatePrompt(false);
-                  break;
-
-                default:
-                  break;
-              }
-            }}
-            type="submit"
+            default:
+              return null;
+          }
+        })()}
+      >
+        <DialogTitle className="flex items-center">
+          <span className="pr-2">{myModalTitle}</span>
+          <FileText
+            strokeWidth={1.5}
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
+        </DialogTitle>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full flex-col">
+          <div
+            className={classNames(
+              !isEdit ? "rounded-lg border" : "",
+              "flex h-full w-full"
+            )}
           >
-            {myButtonText}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            {type === TypeModal.PROMPT && isEdit ? (
+              <Textarea
+                ref={ref}
+                className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
+                value={inputValue}
+                onBlur={() => {
+                  setIsEdit(false);
+                }}
+                autoFocus
+                onChange={(e) => {
+                  setInputValue(e.target.value);
+                  checkVariables(e.target.value);
+                }}
+                placeholder="Type message here."
+              />
+            ) : type === TypeModal.PROMPT && !isEdit ? (
+              <TextAreaContentView />
+            ) : type !== TypeModal.PROMPT ? (
+              <Textarea
+                ref={ref}
+                className="form-input h-full w-full rounded-lg focus-visible:ring-1"
+                value={inputValue}
+                onChange={(e) => {
+                  setInputValue(e.target.value);
+                }}
+                placeholder="Type message here."
+              />
+            ) : (
+              <></>
+            )}
+          </div>
+
+          <div className="mt-4 flex h-fit w-full items-end justify-between">
+            {type === TypeModal.PROMPT && (
+              <div className="mb-auto mr-2 max-h-20 flex-1 overflow-y-auto custom-scroll">
+                <div className="flex flex-wrap items-center">
+                  <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                  <span className="text-md font-semibold text-primary">
+                    Input Variables:
+                  </span>
+
+                  {wordsHighlight.map((word, index) => (
+                    <ShadTooltip
+                      key={getRandomKeyByssmm() + index}
+                      content={word.replace(/[{}]/g, "")}
+                      asChild={false}
+                    >
+                      <Badge
+                        key={index}
+                        variant="gray"
+                        size="md"
+                        className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                      >
+                        <div className="relative bottom-[1px]">
+                          <span>
+                            {word.replace(/[{}]/g, "").length > 59
+                              ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                              : word.replace(/[{}]/g, "")}
+                          </span>
+                        </div>
+                      </Badge>
+                    </ShadTooltip>
+                  ))}
+                </div>
+              </div>
+            )}
+            <Button
+              onClick={() => {
+                switch (myModalType) {
+                  case 1:
+                    setValue(inputValue);
+                    setModalOpen(false);
+                    break;
+                  case 2:
+                    !inputValue || inputValue === ""
+                      ? setModalOpen(false)
+                      : validatePrompt(false);
+                    break;
+
+                  default:
+                    break;
+                }
+              }}
+              type="submit"
+            >
+              {myButtonText}
+            </Button>
+          </div>
+        </div>
+      </BaseModal.Content>
+    </BaseModal>
   );
 }