diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index 64c2a67f7..7a5adc0a0 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -1,10 +1,5 @@
-import {
-  XMarkIcon,
-  ArrowDownTrayIcon,
-  DocumentDuplicateIcon,
-  ComputerDesktopIcon,
-} from "@heroicons/react/24/outline";
-import { Fragment, useContext, useRef, useState } from "react";
+import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
+import { useContext, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
@@ -19,17 +14,17 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { Label } from "@radix-ui/react-label";
-import { Checkbox } from "../../components/ui/checkbox";
 import { Textarea } from "../../components/ui/textarea";
 import { Input } from "../../components/ui/input";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
+import { updateFlowInDatabase } from "../../controllers/API";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);
   const { closePopUp } = useContext(PopUpContext);
-  const {setErrorData} = useContext(alertContext);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
   const ref = useRef();
-  const { flows, tabId, updateFlow,} = useContext(TabsContext);
+  const { flows, tabId, updateFlow } = useContext(TabsContext);
   function setModalOpen(x: boolean) {
     setOpen(x);
     if (x === false) {
@@ -38,8 +33,19 @@ export default function FlowSettingsModal() {
       }, 300);
     }
   }
+
+  function handleSaveFlow(flow) {
+    try {
+      updateFlowInDatabase(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
+  }
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
-  const [description, setDescription] = useState(flows.find((f) => f.id === tabId).description);
+  const [description, setDescription] = useState(
+    flows.find((f) => f.id === tabId).description
+  );
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
@@ -76,7 +82,7 @@ export default function FlowSettingsModal() {
             name="description"
             id="description"
             onChange={(event) => {
-              setDescription(event.target.value)
+              setDescription(event.target.value);
             }}
             value={description ?? null}
             placeholder="Flow description"
@@ -88,15 +94,8 @@ export default function FlowSettingsModal() {
         <DialogFooter>
           <Button
             onClick={() => {
-              if(name !== ""){
-                let newFlow = flows.find((f) => f.id === tabId);
-                newFlow.name = name;
-                newFlow.description = description;
-                updateFlow(newFlow);
-                closePopUp();
-              } else {
-                setErrorData({title: "Error Saving Settings", list: ["The name must not be empty."]})
-              }
+              handleSaveFlow(flows.find((f) => f.id === tabId));
+              setSuccessData({ title: "Changes saved successfully" });
             }}
             type="submit"
           >