diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 75aa451af..acd537c0a 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, ChangeEvent } from "react";
-import { Textarea } from "../ui/textarea";
-import { Label } from "../ui/label";
-import { Input } from "../ui/input";
+import { Textarea } from "../../components/ui/textarea";
+import { Label } from "../../components/ui/label";
+import { Input } from "../../components/ui/input";
 
 type InputProps = {
   name: string | null;
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 4400956ce..4daac7b71 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -504,7 +504,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const createNewFlow = (flowData, flow) => ({
     description: flowData.description,
     name: flow?.name ?? "New Flow",
-    id: uuidv4(),
     data: flowData.data,
   });
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index a5771dd92..05076665f 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -16,10 +16,7 @@ import {
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
-import EditFlowSettings from "../../components/nameInputComponent";
-import { Label } from "../../components/ui/label";
-import { Input } from "../../components/ui/input";
-import { Textarea } from "../../components/ui/textarea";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -56,44 +53,15 @@ export default function ExportModal() {
           <DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>
 
-        <Label>
-          <span className="font-medium">Name</span>
-
-          <Input
-            className="mt-2 focus-visible:ring-1"
-            onChange={(event) => {
-              if (event.target.value != "") {
-                let newFlow = flows.find((f) => f.id === tabId);
-                newFlow.name = event.target.value;
-                setName(event.target.value);
-                updateFlow(newFlow);
-              } else {
-                setName(event.target.value);
-              }
-            }}
-            type="text"
-            name="name"
-            value={name ?? null}
-            placeholder="File name"
-            id="name"
-          />
-        </Label>
-        <Label>
-          <span className="font-medium">Description (optional)</span>
-          <Textarea
-            name="description"
-            id="description"
-            onChange={(event) => {
-              let newFlow = flows.find((f) => f.id === tabId);
-              newFlow.description = event.target.value;
-              updateFlow(newFlow);
-            }}
-            value={flows.find((f) => f.id === tabId).description ?? null}
-            placeholder="Flow description"
-            className="max-h-[100px] mt-2 focus-visible:ring-1"
-            rows={3}
-          />
-        </Label>
+        <EditFlowSettings
+          name={name}
+          description={description}
+          flows={flows}
+          tabId={tabId}
+          setName={setName}
+          setDescription={setDescription}
+          updateFlow={updateFlow}
+        />
         <div className="flex items-center space-x-2">
           <Checkbox
             id="terms"
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index ac59ed965..e81a2cfb1 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -15,7 +15,7 @@ import {
 import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
 import { updateFlowInDatabase } from "../../controllers/API";
-import EditFlowSettings from "../../components/nameInputComponent";
+import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);