diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
index 28b82d78e..6504c2b4e 100644
--- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx
@@ -1,7 +1,8 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
+import { readFlowsFromDatabase } from "../../controllers/API";
 
 type InputProps = {
   name: string | null;
@@ -9,6 +10,8 @@ type InputProps = {
   maxLength?: number;
   flows: Array<{ id: string; name: string; description: string }>;
   tabId: string;
+  invalidName: boolean;
+  setInvalidName: (invalidName: boolean) => void;
   setName: (name: string) => void;
   setDescription: (description: string) => void;
   updateFlow: (flow: { id: string; name: string }) => void;
@@ -16,6 +19,8 @@ type InputProps = {
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,
+  invalidName,
+  setInvalidName,
   description,
   maxLength = 50,
   flows,
@@ -25,6 +30,14 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   updateFlow,
 }) => {
   const [isMaxLength, setIsMaxLength] = useState(false);
+  const nameLists = useRef([]);
+  useEffect(() => {
+    readFlowsFromDatabase().then((flows) => {
+      flows.forEach((flow) => {
+        nameLists.current.push(flow.name);
+      });
+    });
+  }, []);
 
   const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -33,7 +46,11 @@ export const EditFlowSettings: React.FC<InputProps> = ({
     } else {
       setIsMaxLength(false);
     }
-
+    if (!nameLists.current.includes(value)) {
+      setInvalidName(false);
+    } else {
+      setInvalidName(true);
+    }
     setName(value);
   };
 
@@ -55,6 +72,9 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           {isMaxLength && (
             <span className="edit-flow-span">Character limit reached</span>
           )}
+          {invalidName && (
+            <span className="edit-flow-span">Name already in use</span>
+          )}
         </div>
         <Input
           className="nopan nodrag noundo nocopy mt-2 font-normal"
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 9dc9d1daa..7f9e2e6e9 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -23,6 +23,8 @@ export default function FlowSettingsModal({
   const [description, setDescription] = useState(
     flows.find((f) => f.id === tabId).description
   );
+  const [invalidName, setInvalidName] = useState(false);
+
   function handleClick() {
     let savedFlow = flows.find((f) => f.id === tabId);
     savedFlow.name = name;
@@ -39,6 +41,8 @@ export default function FlowSettingsModal({
       </BaseModal.Header>
       <BaseModal.Content>
         <EditFlowSettings
+          invalidName={invalidName}
+          setInvalidName={setInvalidName}
           name={name}
           description={description}
           flows={flows}
@@ -50,7 +54,7 @@ export default function FlowSettingsModal({
       </BaseModal.Content>
 
       <BaseModal.Footer>
-        <Button onClick={handleClick} type="submit">
+        <Button disabled={invalidName} onClick={handleClick} type="submit">
           Save
         </Button>
       </BaseModal.Footer>