diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx
index 3cd836c1f..1a69082fe 100644
--- a/src/frontend/src/components/AccordionComponent/index.tsx
+++ b/src/frontend/src/components/AccordionComponent/index.tsx
@@ -45,7 +45,9 @@ export default function AccordionComponent({
           >
             {trigger}
           </AccordionTrigger>
-          <AccordionContent>{children}</AccordionContent>
+          <AccordionContent className="AccordionContent">
+            {children}
+          </AccordionContent>
         </AccordionItem>
       </Accordion>
     </>
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
new file mode 100644
index 000000000..52d4720dc
--- /dev/null
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -0,0 +1,544 @@
+import { Check, Clipboard, Download } from "lucide-react";
+import { useContext, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import AccordionComponent from "../../components/AccordionComponent";
+import ShadTooltip from "../../components/ShadTooltipComponent";
+import CodeAreaComponent from "../../components/codeAreaComponent";
+import Dropdown from "../../components/dropdownComponent";
+import FloatComponent from "../../components/floatComponent";
+import InputComponent from "../../components/inputComponent";
+import InputFileComponent from "../../components/inputFileComponent";
+import InputListComponent from "../../components/inputListComponent";
+import IntComponent from "../../components/intComponent";
+import PromptAreaComponent from "../../components/promptComponent";
+import TextAreaComponent from "../../components/textAreaComponent";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../components/ui/tabs";
+import { darkContext } from "../../contexts/darkContext";
+import { FlowType } from "../../types/flow/index";
+import { classNames } from "../../utils";
+
+export default function CodeTabsComponent({
+  flow,
+  tabs,
+  activeTab,
+  setActiveTab,
+  isMessage,
+  tweaks,
+}: {
+  flow?: FlowType;
+  tabs: any;
+  activeTab: string;
+  setActiveTab: any;
+  isMessage?: boolean;
+  tweaks?: {
+    tweak?: any;
+    tweaksList?: any;
+    buildContent?: any;
+    getValue?: any;
+    buildTweakObject?: any;
+  };
+}) {
+  const [isCopied, setIsCopied] = useState<Boolean>(false);
+  const [openAccordion, setOpenAccordion] = useState([]);
+  const { dark } = useContext(darkContext);
+
+  const copyToClipboard = () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
+
+    navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    });
+  };
+
+  const downloadAsFile = () => {
+    const fileExtension = tabs[activeTab].language || ".txt";
+    const suggestedFileName = `${"generated-code."}${fileExtension}`;
+    const fileName = window.prompt("Enter the file name.", suggestedFileName);
+
+    if (!fileName) {
+      // user pressed cancel on prompt
+      return;
+    }
+
+    const blob = new Blob([tabs[activeTab].code], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  function openAccordions() {
+    let accordionsToOpen = [];
+    tweaks.tweak.current.forEach((el) => {
+      Object.keys(el).forEach((key) => {
+        if (Object.keys(el[key]).length > 0) {
+          accordionsToOpen.push(key);
+          setOpenAccordion(accordionsToOpen);
+        }
+      });
+    });
+
+    if (accordionsToOpen.length == 0) {
+      setOpenAccordion([]);
+    }
+  }
+  return (
+    <Tabs
+      value={activeTab}
+      className={
+        "api-modal-tabs " +
+        (isMessage ? "dark " : "") +
+        (dark && isMessage ? "bg-background" : "")
+      }
+      onValueChange={(value) => {
+        setActiveTab(value);
+        if (value === "3") {
+          openAccordions();
+        }
+      }}
+    >
+      <div className="api-modal-tablist-div">
+        <TabsList>
+          {tabs.map((tab, index) => (
+            <TabsTrigger
+              className={
+                isMessage ? "data-[state=active]:bg-primary-foreground" : ""
+              }
+              key={index}
+              value={index.toString()}
+            >
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {Number(activeTab) < 3 && (
+          <div className="float-right mx-1 flex gap-2">
+            <button
+              className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+              onClick={copyToClipboard}
+            >
+              {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
+              {isCopied ? "Copied!" : "Copy code"}
+            </button>
+            <button
+              className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+              onClick={downloadAsFile}
+            >
+              <Download size={18} />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {tabs.map((tab, index) => (
+        <TabsContent
+          value={index.toString()}
+          className="api-modal-tabs-content"
+          key={index} // Remember to add a unique key prop
+        >
+          {index < 3 ? (
+            <SyntaxHighlighter
+              className="mt-0 h-full w-full overflow-auto custom-scroll"
+              language={tab.mode}
+              style={oneDark}
+            >
+              {tab.code}
+            </SyntaxHighlighter>
+          ) : index === 3 ? (
+            <>
+              <div className="api-modal-according-display">
+                <div
+                  className={classNames(
+                    "h-[70vh] w-full rounded-lg bg-muted",
+                    1 == 1
+                      ? "overflow-scroll overflow-x-hidden custom-scroll"
+                      : "overflow-hidden"
+                  )}
+                >
+                  {flow["data"]["nodes"].map((t: any, index) => (
+                    <div className="px-3" key={index}>
+                      {tweaks.tweaksList.current.includes(t["data"]["id"]) && (
+                        <AccordionComponent
+                          trigger={t["data"]["id"]}
+                          open={openAccordion}
+                        >
+                          <div className="api-modal-table-arrangement">
+                            <Table className="table-fixed bg-muted outline-1">
+                              <TableHeader className="h-10 border-input text-xs font-medium text-ring">
+                                <TableRow className="dark:border-b-muted">
+                                  <TableHead className="h-7 text-center">
+                                    PARAM
+                                  </TableHead>
+                                  <TableHead className="h-7 p-0 text-center">
+                                    VALUE
+                                  </TableHead>
+                                </TableRow>
+                              </TableHeader>
+                              <TableBody className="p-0">
+                                {Object.keys(t["data"]["node"]["template"])
+                                  .filter(
+                                    (n) =>
+                                      n.charAt(0) !== "_" &&
+                                      t.data.node.template[n].show &&
+                                      (t.data.node.template[n].type === "str" ||
+                                        t.data.node.template[n].type ===
+                                          "bool" ||
+                                        t.data.node.template[n].type ===
+                                          "float" ||
+                                        t.data.node.template[n].type ===
+                                          "code" ||
+                                        t.data.node.template[n].type ===
+                                          "prompt" ||
+                                        t.data.node.template[n].type ===
+                                          "file" ||
+                                        t.data.node.template[n].type === "int")
+                                  )
+                                  .map((n, i) => {
+                                    //console.log(t.data.node.template[n]);
+
+                                    return (
+                                      <TableRow
+                                        key={i}
+                                        className="h-10 dark:border-b-muted"
+                                      >
+                                        <TableCell className="p-0 text-center text-sm text-foreground">
+                                          {n}
+                                        </TableCell>
+                                        <TableCell className="p-0 text-xs text-foreground">
+                                          <div className="m-auto w-[250px]">
+                                            {t.data.node.template[n].type ===
+                                              "str" &&
+                                            !t.data.node.template[n].options ? (
+                                              <div className="mx-auto">
+                                                {t.data.node.template[n]
+                                                  .list ? (
+                                                  <InputListComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    value={
+                                                      !t.data.node.template[n]
+                                                        .value ||
+                                                      t.data.node.template[n]
+                                                        .value === ""
+                                                        ? [""]
+                                                        : t.data.node.template[
+                                                            n
+                                                          ].value
+                                                    }
+                                                    onChange={(k) => {}}
+                                                    onAddInput={(k) => {
+                                                      tweaks.buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                ) : t.data.node.template[n]
+                                                    .multiline ? (
+                                                  <ShadTooltip
+                                                    content={tweaks.buildContent(
+                                                      t.data.node.template[n]
+                                                        .value
+                                                    )}
+                                                  >
+                                                    <div>
+                                                      <TextAreaComponent
+                                                        disabled={false}
+                                                        editNode={true}
+                                                        value={tweaks.getValue(
+                                                          t.data.node.template[
+                                                            n
+                                                          ].value,
+                                                          t.data,
+                                                          t.data.node.template[
+                                                            n
+                                                          ]
+                                                        )}
+                                                        onChange={(k) => {
+                                                          tweaks.buildTweakObject(
+                                                            t["data"]["id"],
+                                                            k,
+                                                            t.data.node
+                                                              .template[n]
+                                                          );
+                                                        }}
+                                                      />
+                                                    </div>
+                                                  </ShadTooltip>
+                                                ) : (
+                                                  <InputComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    password={
+                                                      t.data.node.template[n]
+                                                        .password ?? false
+                                                    }
+                                                    value={tweaks.getValue(
+                                                      t.data.node.template[n]
+                                                        .value,
+                                                      t.data,
+                                                      t.data.node.template[n]
+                                                    )}
+                                                    onChange={(k) => {
+                                                      tweaks.buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                )}
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "bool" ? (
+                                              <div className="ml-auto">
+                                                {" "}
+                                                <ToggleShadComponent
+                                                  enabled={
+                                                    t.data.node.template[n]
+                                                      .value
+                                                  }
+                                                  setEnabled={(e) => {
+                                                    t.data.node.template[
+                                                      n
+                                                    ].value = e;
+                                                    tweaks.buildTweakObject(
+                                                      t["data"]["id"],
+                                                      e,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                  size="small"
+                                                  disabled={false}
+                                                />
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "file" ? (
+                                              <ShadTooltip
+                                                content={tweaks.buildContent(
+                                                  tweaks.getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )
+                                                )}
+                                              >
+                                                <div className="mx-auto">
+                                                  <InputFileComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    value={
+                                                      t.data.node.template[n]
+                                                        .value ?? ""
+                                                    }
+                                                    onChange={(k: any) => {}}
+                                                    fileTypes={
+                                                      t.data.node.template[n]
+                                                        .fileTypes
+                                                    }
+                                                    suffixes={
+                                                      t.data.node.template[n]
+                                                        .suffixes
+                                                    }
+                                                    onFileChange={(
+                                                      k: any
+                                                    ) => {}}
+                                                  ></InputFileComponent>
+                                                </div>
+                                              </ShadTooltip>
+                                            ) : t.data.node.template[n].type ===
+                                              "float" ? (
+                                              <div className="mx-auto">
+                                                <FloatComponent
+                                                  disabled={false}
+                                                  editNode={true}
+                                                  value={tweaks.getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )}
+                                                  onChange={(k) => {
+                                                    tweaks.buildTweakObject(
+                                                      t["data"]["id"],
+                                                      k,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                                "str" &&
+                                              t.data.node.template[n]
+                                                .options ? (
+                                              <div className="mx-auto">
+                                                <Dropdown
+                                                  editNode={true}
+                                                  apiModal={true}
+                                                  options={
+                                                    t.data.node.template[n]
+                                                      .options
+                                                  }
+                                                  onSelect={(k) => {
+                                                    tweaks.buildTweakObject(
+                                                      t["data"]["id"],
+                                                      k,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                  value={tweaks.getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )}
+                                                ></Dropdown>
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "int" ? (
+                                              <div className="mx-auto">
+                                                <IntComponent
+                                                  disabled={false}
+                                                  editNode={true}
+                                                  value={tweaks.getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )}
+                                                  onChange={(k) => {
+                                                    tweaks.buildTweakObject(
+                                                      t["data"]["id"],
+                                                      k,
+                                                      t.data.node.template[n]
+                                                    );
+                                                  }}
+                                                />
+                                              </div>
+                                            ) : t.data.node.template[n].type ===
+                                              "prompt" ? (
+                                              <ShadTooltip
+                                                content={tweaks.buildContent(
+                                                  tweaks.getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )
+                                                )}
+                                              >
+                                                <div className="mx-auto">
+                                                  <PromptAreaComponent
+                                                    editNode={true}
+                                                    disabled={false}
+                                                    value={tweaks.getValue(
+                                                      t.data.node.template[n]
+                                                        .value,
+                                                      t.data,
+                                                      t.data.node.template[n]
+                                                    )}
+                                                    onChange={(k) => {
+                                                      tweaks.buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                </div>
+                                              </ShadTooltip>
+                                            ) : t.data.node.template[n].type ===
+                                              "code" ? (
+                                              <ShadTooltip
+                                                content={tweaks.buildContent(
+                                                  tweaks.getValue(
+                                                    t.data.node.template[n]
+                                                      .value,
+                                                    t.data,
+                                                    t.data.node.template[n]
+                                                  )
+                                                )}
+                                              >
+                                                <div className="mx-auto">
+                                                  <CodeAreaComponent
+                                                    disabled={false}
+                                                    editNode={true}
+                                                    value={tweaks.getValue(
+                                                      t.data.node.template[n]
+                                                        .value,
+                                                      t.data,
+                                                      t.data.node.template[n]
+                                                    )}
+                                                    onChange={(k) => {
+                                                      tweaks.buildTweakObject(
+                                                        t["data"]["id"],
+                                                        k,
+                                                        t.data.node.template[n]
+                                                      );
+                                                    }}
+                                                  />
+                                                </div>
+                                              </ShadTooltip>
+                                            ) : t.data.node.template[n].type ===
+                                              "Any" ? (
+                                              "-"
+                                            ) : (
+                                              <div className="hidden"></div>
+                                            )}
+                                          </div>
+                                        </TableCell>
+                                      </TableRow>
+                                    );
+                                  })}
+                              </TableBody>
+                            </Table>
+                          </div>
+                        </AccordionComponent>
+                      )}
+
+                      {tweaks.tweaksList.current.length === 0 && (
+                        <>
+                          <div className="pt-3">
+                            No tweaks are available for this flow.
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : null}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx
index 4b5a12384..4ee52db10 100644
--- a/src/frontend/src/components/ui/accordion.tsx
+++ b/src/frontend/src/components/ui/accordion.tsx
@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
       className
     )}
     {...props}
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 2ad709f48..2d9bf04d7 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "fixed z-50 flex w-full flex-col gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}
diff --git a/src/frontend/src/components/ui/tabs.tsx b/src/frontend/src/components/ui/tabs.tsx
index 8c382e35e..b84792dce 100644
--- a/src/frontend/src/components/ui/tabs.tsx
+++ b/src/frontend/src/components/ui/tabs.tsx
@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",
       className
     )}
     {...props}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index e4165fd3c..c0bfb552e 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -145,6 +145,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+pre {
+  font-family: inherit;
+}
 
 /* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
 The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
@@ -152,6 +155,34 @@ The cursor: default; property value restores the browser's default cursor style
   cursor: default;
 }
 
+.AccordionContent {
+  overflow: hidden;
+}
+.AccordionContent[data-state='open'] {
+  animation: slideDown 300ms ease-out;
+}
+.AccordionContent[data-state='closed'] {
+  animation: slideUp 300ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
 
 @layer components {
   .round-buttons-position {
@@ -904,7 +935,7 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .api-modal-tabs {
-    @apply lg:w-full h-full overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
+    @apply lg:w-full h-full flex flex-col overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
   }
   .api-modal-tablist-div {
     @apply flex items-center justify-between px-2
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 1d530ca6d..c4571bf26 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -11,35 +11,8 @@ import {
   useState,
 } from "react";
 // import "ace-builds/webpack-resolver";
-import { Check, Clipboard, Code2 } from "lucide-react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import AccordionComponent from "../../components/AccordionComponent";
-import ShadTooltip from "../../components/ShadTooltipComponent";
-import CodeAreaComponent from "../../components/codeAreaComponent";
-import Dropdown from "../../components/dropdownComponent";
-import FloatComponent from "../../components/floatComponent";
-import InputComponent from "../../components/inputComponent";
-import InputFileComponent from "../../components/inputFileComponent";
-import InputListComponent from "../../components/inputListComponent";
-import IntComponent from "../../components/intComponent";
-import PromptAreaComponent from "../../components/promptComponent";
-import TextAreaComponent from "../../components/textAreaComponent";
-import ToggleShadComponent from "../../components/toggleShadComponent";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../components/ui/tabs";
+import { Code2 } from "lucide-react";
+import CodeTabsComponent from "../../components/codeTabsComponent";
 import {
   EXPORT_CODE_DIALOG,
   getCurlCode,
@@ -48,7 +21,7 @@ import {
 } from "../../constants";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow/index";
-import { buildTweaks, classNames } from "../../utils";
+import { buildTweaks } from "../../utils";
 import BaseModal from "../baseModal";
 
 const ApiModal = forwardRef(
@@ -62,27 +35,11 @@ const ApiModal = forwardRef(
     },
     ref
   ) => {
-    const [activeTab, setActiveTab] = useState("0");
     const [open, setOpen] = useState(false);
-    const [isCopied, setIsCopied] = useState<Boolean>(false);
-    const [openAccordion, setOpenAccordion] = useState([]);
+    const [activeTab, setActiveTab] = useState("0");
     const tweak = useRef([]);
     const tweaksList = useRef([]);
     const { setTweak, getTweak, tabsState } = useContext(TabsContext);
-
-    const copyToClipboard = () => {
-      if (!navigator.clipboard || !navigator.clipboard.writeText) {
-        return;
-      }
-
-      navigator.clipboard.writeText(tabs[activeTab].code).then(() => {
-        setIsCopied(true);
-
-        setTimeout(() => {
-          setIsCopied(false);
-        }, 2000);
-      });
-    };
     const pythonApiCode = getPythonApiCode(flow, tweak.current, tabsState);
     const curl_code = getCurlCode(flow, tweak.current, tabsState);
     const pythonCode = getPythonCode(flow, tweak.current, tabsState);
@@ -92,6 +49,7 @@ const ApiModal = forwardRef(
         name: "cURL",
         mode: "bash",
         image: "https://curl.se/logo/curl-symbol-transparent.png",
+        language: "sh",
         code: curl_code,
       },
       {
@@ -99,12 +57,14 @@ const ApiModal = forwardRef(
         mode: "python",
         image:
           "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+        language: "py",
         code: pythonApiCode,
       },
       {
         name: "Python Code",
         mode: "python",
         image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+        language: "py",
         code: pythonCode,
       },
     ]);
@@ -133,6 +93,7 @@ const ApiModal = forwardRef(
             name: "cURL",
             mode: "bash",
             image: "https://curl.se/logo/curl-symbol-transparent.png",
+            language: "sh",
             code: curl_code,
           },
           {
@@ -140,11 +101,13 @@ const ApiModal = forwardRef(
             mode: "python",
             image:
               "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+            language: "py",
             code: pythonApiCode,
           },
           {
             name: "Python Code",
             mode: "python",
+            language: "py",
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
             code: pythonCode,
           },
@@ -152,6 +115,7 @@ const ApiModal = forwardRef(
             name: "Tweaks",
             mode: "python",
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
             code: pythonCode,
           },
         ]);
@@ -161,6 +125,7 @@ const ApiModal = forwardRef(
             name: "cURL",
             mode: "bash",
             image: "https://curl.se/logo/curl-symbol-transparent.png",
+            language: "sh",
             code: curl_code,
           },
           {
@@ -168,12 +133,14 @@ const ApiModal = forwardRef(
             mode: "python",
             image:
               "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+            language: "py",
             code: pythonApiCode,
           },
           {
             name: "Python Code",
             mode: "python",
             image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+            language: "py",
             code: pythonCode,
           },
         ]);
@@ -206,7 +173,6 @@ const ApiModal = forwardRef(
         return self.indexOf(value) === index;
       });
     }
-
     function buildTweakObject(tw, changes, template) {
       if (template.type === "float") {
         changes = parseFloat(changes);
@@ -286,22 +252,6 @@ const ApiModal = forwardRef(
       return returnValue;
     }
 
-    function openAccordions() {
-      let accordionsToOpen = [];
-      tweak.current.forEach((el) => {
-        Object.keys(el).forEach((key) => {
-          if (Object.keys(el[key]).length > 0) {
-            accordionsToOpen.push(key);
-            setOpenAccordion(accordionsToOpen);
-          }
-        });
-      });
-
-      if (accordionsToOpen.length == 0) {
-        setOpenAccordion([]);
-      }
-    }
-
     return (
       <BaseModal open={open} setOpen={setOpen}>
         <BaseModal.Trigger>{children}</BaseModal.Trigger>
@@ -314,470 +264,19 @@ const ApiModal = forwardRef(
           />
         </BaseModal.Header>
         <BaseModal.Content>
-          <Tabs
-            value={activeTab}
-            className="api-modal-tabs"
-            onValueChange={(value) => {
-              setActiveTab(value);
-              if (value === "3") {
-                openAccordions();
-              }
+          <CodeTabsComponent
+            flow={flow}
+            tabs={tabs}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            tweaks={{
+              tweak,
+              tweaksList,
+              buildContent,
+              buildTweakObject,
+              getValue,
             }}
-          >
-            <div className="api-modal-tablist-div">
-              <TabsList>
-                {tabs.map((tab, index) => (
-                  <TabsTrigger key={index} value={index.toString()}>
-                    {tab.name}
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-              {Number(activeTab) < 3 && (
-                <div className="float-right">
-                  <button
-                    className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-                    onClick={copyToClipboard}
-                  >
-                    {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
-                    {isCopied ? "Copied!" : "Copy code"}
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {tabs.map((tab, index) => (
-              <TabsContent
-                value={index.toString()}
-                className="api-modal-tabs-content"
-                key={index} // Remember to add a unique key prop
-              >
-                {index < 3 ? (
-                  <SyntaxHighlighter
-                    className="h-[70vh] w-full overflow-auto custom-scroll"
-                    language={tab.mode}
-                    style={oneDark}
-                  >
-                    {tab.code}
-                  </SyntaxHighlighter>
-                ) : index === 3 ? (
-                  <>
-                    <div className="api-modal-according-display">
-                      <div
-                        className={classNames(
-                          "h-[70vh] w-full rounded-lg bg-muted",
-                          1 == 1
-                            ? "overflow-scroll overflow-x-hidden custom-scroll"
-                            : "overflow-hidden"
-                        )}
-                      >
-                        {flow["data"]["nodes"].map((t: any, index) => (
-                          <div className="px-3" key={index}>
-                            {tweaksList.current.includes(t["data"]["id"]) && (
-                              <AccordionComponent
-                                trigger={t["data"]["id"]}
-                                open={openAccordion}
-                              >
-                                <div className="api-modal-table-arrangement">
-                                  <Table className="table-fixed bg-muted outline-1">
-                                    <TableHeader className="h-10 border-input text-xs font-medium text-ring">
-                                      <TableRow className="dark:border-b-muted">
-                                        <TableHead className="h-7 text-center">
-                                          PARAM
-                                        </TableHead>
-                                        <TableHead className="h-7 p-0 text-center">
-                                          VALUE
-                                        </TableHead>
-                                      </TableRow>
-                                    </TableHeader>
-                                    <TableBody className="p-0">
-                                      {Object.keys(
-                                        t["data"]["node"]["template"]
-                                      )
-                                        .filter(
-                                          (n) =>
-                                            n.charAt(0) !== "_" &&
-                                            t.data.node.template[n].show &&
-                                            (t.data.node.template[n].type ===
-                                              "str" ||
-                                              t.data.node.template[n].type ===
-                                                "bool" ||
-                                              t.data.node.template[n].type ===
-                                                "float" ||
-                                              t.data.node.template[n].type ===
-                                                "code" ||
-                                              t.data.node.template[n].type ===
-                                                "prompt" ||
-                                              t.data.node.template[n].type ===
-                                                "file" ||
-                                              t.data.node.template[n].type ===
-                                                "int")
-                                        )
-                                        .map((n, i) => {
-                                          //console.log(t.data.node.template[n]);
-
-                                          return (
-                                            <TableRow
-                                              key={i}
-                                              className="h-10 dark:border-b-muted"
-                                            >
-                                              <TableCell className="p-0 text-center text-sm text-foreground">
-                                                {n}
-                                              </TableCell>
-                                              <TableCell className="p-0 text-xs text-foreground">
-                                                <div className="m-auto w-[250px]">
-                                                  {t.data.node.template[n]
-                                                    .type === "str" &&
-                                                  !t.data.node.template[n]
-                                                    .options ? (
-                                                    <div className="mx-auto">
-                                                      {t.data.node.template[n]
-                                                        .list ? (
-                                                        <InputListComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          value={
-                                                            !t.data.node
-                                                              .template[n]
-                                                              .value ||
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value === ""
-                                                              ? [""]
-                                                              : t.data.node
-                                                                  .template[n]
-                                                                  .value
-                                                          }
-                                                          onChange={(k) => {}}
-                                                          onAddInput={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      ) : t.data.node.template[
-                                                          n
-                                                        ].multiline ? (
-                                                        <ShadTooltip
-                                                          content={buildContent(
-                                                            t.data.node
-                                                              .template[n].value
-                                                          )}
-                                                        >
-                                                          <div>
-                                                            <TextAreaComponent
-                                                              disabled={false}
-                                                              editNode={true}
-                                                              value={getValue(
-                                                                t.data.node
-                                                                  .template[n]
-                                                                  .value,
-                                                                t.data,
-                                                                t.data.node
-                                                                  .template[n]
-                                                              )}
-                                                              onChange={(k) => {
-                                                                buildTweakObject(
-                                                                  t["data"][
-                                                                    "id"
-                                                                  ],
-                                                                  k,
-                                                                  t.data.node
-                                                                    .template[n]
-                                                                );
-                                                              }}
-                                                            />
-                                                          </div>
-                                                        </ShadTooltip>
-                                                      ) : (
-                                                        <InputComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          password={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .password ?? false
-                                                          }
-                                                          value={getValue(
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value,
-                                                            t.data,
-                                                            t.data.node
-                                                              .template[n]
-                                                          )}
-                                                          onChange={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      )}
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "bool" ? (
-                                                    <div className="ml-auto">
-                                                      {" "}
-                                                      <ToggleShadComponent
-                                                        enabled={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value
-                                                        }
-                                                        setEnabled={(e) => {
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value = e;
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            e,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                        size="small"
-                                                        disabled={false}
-                                                      />
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "file" ? (
-                                                    <ShadTooltip
-                                                      content={buildContent(
-                                                        getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )
-                                                      )}
-                                                    >
-                                                      <div className="mx-auto">
-                                                        <InputFileComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          value={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value ?? ""
-                                                          }
-                                                          onChange={(
-                                                            k: any
-                                                          ) => {}}
-                                                          fileTypes={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .fileTypes
-                                                          }
-                                                          suffixes={
-                                                            t.data.node
-                                                              .template[n]
-                                                              .suffixes
-                                                          }
-                                                          onFileChange={(
-                                                            k: any
-                                                          ) => {}}
-                                                        ></InputFileComponent>
-                                                      </div>
-                                                    </ShadTooltip>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "float" ? (
-                                                    <div className="mx-auto">
-                                                      <FloatComponent
-                                                        disabled={false}
-                                                        editNode={true}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                        onChange={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "str" &&
-                                                    t.data.node.template[n]
-                                                      .options ? (
-                                                    <div className="mx-auto">
-                                                      <Dropdown
-                                                        editNode={true}
-                                                        apiModal={true}
-                                                        options={
-                                                          t.data.node.template[
-                                                            n
-                                                          ].options
-                                                        }
-                                                        onSelect={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                      ></Dropdown>
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "int" ? (
-                                                    <div className="mx-auto">
-                                                      <IntComponent
-                                                        disabled={false}
-                                                        editNode={true}
-                                                        value={getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )}
-                                                        onChange={(k) => {
-                                                          buildTweakObject(
-                                                            t["data"]["id"],
-                                                            k,
-                                                            t.data.node
-                                                              .template[n]
-                                                          );
-                                                        }}
-                                                      />
-                                                    </div>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "prompt" ? (
-                                                    <ShadTooltip
-                                                      content={buildContent(
-                                                        getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )
-                                                      )}
-                                                    >
-                                                      <div className="mx-auto">
-                                                        <PromptAreaComponent
-                                                          editNode={true}
-                                                          disabled={false}
-                                                          value={getValue(
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value,
-                                                            t.data,
-                                                            t.data.node
-                                                              .template[n]
-                                                          )}
-                                                          onChange={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      </div>
-                                                    </ShadTooltip>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "code" ? (
-                                                    <ShadTooltip
-                                                      content={buildContent(
-                                                        getValue(
-                                                          t.data.node.template[
-                                                            n
-                                                          ].value,
-                                                          t.data,
-                                                          t.data.node.template[
-                                                            n
-                                                          ]
-                                                        )
-                                                      )}
-                                                    >
-                                                      <div className="mx-auto">
-                                                        <CodeAreaComponent
-                                                          disabled={false}
-                                                          editNode={true}
-                                                          value={getValue(
-                                                            t.data.node
-                                                              .template[n]
-                                                              .value,
-                                                            t.data,
-                                                            t.data.node
-                                                              .template[n]
-                                                          )}
-                                                          onChange={(k) => {
-                                                            buildTweakObject(
-                                                              t["data"]["id"],
-                                                              k,
-                                                              t.data.node
-                                                                .template[n]
-                                                            );
-                                                          }}
-                                                        />
-                                                      </div>
-                                                    </ShadTooltip>
-                                                  ) : t.data.node.template[n]
-                                                      .type === "Any" ? (
-                                                    "-"
-                                                  ) : (
-                                                    <div className="hidden"></div>
-                                                  )}
-                                                </div>
-                                              </TableCell>
-                                            </TableRow>
-                                          );
-                                        })}
-                                    </TableBody>
-                                  </Table>
-                                </div>
-                              </AccordionComponent>
-                            )}
-
-                            {tweaksList.current.length === 0 && (
-                              <>
-                                <div className="pt-3">
-                                  No tweaks are available for this flow.
-                                </div>
-                              </>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </>
-                ) : null}
-              </TabsContent>
-            ))}
-          </Tabs>
+          />
         </BaseModal.Content>
       </BaseModal>
     );
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index b40f39bd1..870e8f948 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -104,7 +104,9 @@ function BaseModal({
       </DialogTrigger>
       <DialogContent className={minWidth}>
         {headerChild}
-        <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
+        <div className={`mt-2 flex flex-col ${height} w-full `}>
+          {ContentChild}
+        </div>
         {ContentFooter && (
           <div className="flex flex-row-reverse">{ContentFooter}</div>
         )}
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 953aed530..a441fa783 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -8,11 +8,11 @@ import remarkMath from "remark-math";
 import MaleTechnology from "../../../assets/male-technologist.png";
 import Robot from "../../../assets/robot.png";
 import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper";
+import CodeTabsComponent from "../../../components/codeTabsComponent";
 import { THOUGHTS_ICON } from "../../../constants";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import FileCard from "../fileComponent";
-import { CodeBlock } from "./codeBlock";
 export default function ChatMessage({
   chat,
   lockChat,
@@ -80,8 +80,8 @@ export default function ChatMessage({
                       <ReactMarkdown
                         remarkPlugins={[remarkGfm, remarkMath]}
                         rehypePlugins={[rehypeMathjax]}
-                        className="markdown prose inline-block break-words text-primary
-                     dark:prose-invert sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
+                        className="markdown inline-block break-words text-primary
+                      sm:w-[30vw] sm:max-w-[30vw] lg:w-[40vw] lg:max-w-[40vw]"
                         components={{
                           code: ({
                             node,
@@ -110,11 +110,20 @@ export default function ChatMessage({
                             );
 
                             return !inline ? (
-                              <CodeBlock
-                                key={Math.random()}
-                                language={(match && match[1]) || ""}
-                                value={String(children).replace(/\n$/, "")}
-                                {...props}
+                              <CodeTabsComponent
+                                isMessage
+                                tabs={[
+                                  {
+                                    name: (match && match[1]) || "",
+                                    mode: (match && match[1]) || "",
+                                    image:
+                                      "https://curl.se/logo/curl-symbol-transparent.png",
+                                    language: (match && match[1]) || "",
+                                    code: String(children).replace(/\n$/, ""),
+                                  },
+                                ]}
+                                activeTab={"0"}
+                                setActiveTab={() => {}}
                               />
                             ) : (
                               <code className={className} {...props}>
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index 3f2b21551..0fa13d0d5 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -452,7 +452,7 @@ export default function FormModal({
                             </div>
                           </div>
                         </AccordionTrigger>
-                        <AccordionContent>
+                        <AccordionContent className="AccordionContent">
                           <div className="file-component-tab-column">
                             {tabsState[
                               id.current
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index a3e0452c9..bc80dac5b 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -28,20 +28,6 @@ module.exports = {
       },
     },
     extend: {
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
       colors: {
         connection: "var(--connection)",
         "almost-dark-gray": "var(--almost-dark-gray)",
@@ -129,20 +115,6 @@ module.exports = {
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
       },
-      keyframes: {
-        slideDown: {
-          from: { height: 0 },
-          to: { height: "100vh" },
-        },
-        slideUp: {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "slideDown 300ms ease-out",
-        "accordion-up": "slideUp 300ms ease-in",
-      },
     },
   },