diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 49b6ea194..82d256c6e 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -37,3 +37,47 @@ export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
  * @constant
  */
 export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
+
+/**
+ * Function to get the python code for the API
+ * @param {string} flowId - The id of the flow
+ * @returns {string} - The python code
+ */
+export const getPythonApiCode = (flowId: string): string => {
+  return `import requests
+
+  FLOW_ID = "${flowId}"
+  API_URL = f"${window.location.protocol}//${window.location.host}/predict/{FLOW_ID}"
+
+  def predict(message):
+      payload = {'message': message}
+      response = requests.post(API_URL, json=payload)
+      return response.json()
+
+  print(predict("Your message"))`;
+};
+
+/**
+ * Function to get the curl code for the API
+ * @param {string} flowId - The id of the flow
+ * @returns {string} - The curl code
+ */
+export const getCurlCode = (flowId: string): string => {
+  return `curl -X POST \\
+  -H "Content-Type: application/json" \\
+  -d '{"message": "Your message"}' \\
+  ${window.location.protocol}//${window.location.host}/predict/${flowId}`;
+};
+
+/**
+ * Function to get the python code for the API
+ * @param {string} flowName - The name of the flow
+ * @returns {string} - The python code
+ */
+export const getPythonCode = (flowName: string): string => {
+  return `from langflow import load_flow_from_json
+
+    flow = load_flow_from_json("${flowName}.json")
+    # Now you can use it like any chain
+    flow("Hey, have you heard of LangFlow?")`;
+};
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index da1b21123..6a58d467a 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -25,6 +25,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { FlowType } from "src/types/flow";
+import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -53,28 +54,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     }
   }
 
-  const pythonApiCode = `import requests
+  const pythonApiCode = getPythonApiCode(flow.id);
 
-FLOW_ID = "${flow.id}"
-API_URL = f"${window.location.protocol}//${window.location.host}/predict/{FLOW_ID}"
-
-def predict(message):
-    payload = {'message': message}
-    response = requests.post(API_URL, json=payload)
-    return response.json()
-
-print(predict("Your message"))`;
-
-  const curl_code = `curl -X POST \\
-  -H "Content-Type: application/json" \\
-  -d '{"message": "Your message"}' \\
-  ${window.location.protocol}//${window.location.host}/predict/${flow.id}`;
-
-  const pythonCode = `from langflow import load_flow_from_json
-
-flow = load_flow_from_json("${flow.name}.json")
-# Now you can use it like any chain
-flow("Hey, have you heard of LangFlow?")`;
+  const curl_code = getCurlCode(flow.id);
+  const pythonCode = getPythonCode(flow.name);
 
   const tabs = [
     {
diff --git a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
index 2b05a0df7..b69201a05 100644
--- a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import {
   ArrowTopRightOnSquareIcon,
   TrashIcon,
@@ -15,6 +15,11 @@ import {
   CardTitle,
 } from "../../../../components/ui/card";
 import { FlowType } from "../../../../types/flow";
+import RenameLabel from "../../../../components/ui/rename-label";
+import _ from "lodash";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { alertContext } from "../../../../contexts/alertContext";
+import { updateFlowInDatabase } from "../../../../controllers/API";
 export const CardComponent = ({
   flow,
   idx,
@@ -28,31 +33,38 @@ export const CardComponent = ({
   setTabIndex: (idx: number) => void;
   setActiveTab: (tab: string) => void;
 }) => {
-  // flow has a style attribute
-  // if it is empty just get a random style
-  // if it is not empty use that style
-  // if it is not empty and it is not a valid style get a random style
+  const { setErrorData } = useContext(alertContext);
+  const { updateFlow } = useContext(TabsContext);
+  function handleSaveFlow(flow) {
+    try {
+      updateFlowInDatabase(flow);
+      updateFlow(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
+  }
+  const [rename, setRename] = useState(false);
 
-  let emoji = flow.style?.emoji || "🤖";
-  // get random tailwind color
-  let color = flow.style?.color || "bg-blue-200";
   return (
     <Card className="group">
       <CardHeader>
         <CardTitle className="flex justify-between items-start">
           <div className="flex gap-4 items-center">
-            {/* <span
-              className={
-                "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
-                color
-              }
-            >
-              {emoji}
-            </span> */}
-            {flow.name}
+            <RenameLabel
+              value={flow.name}
+              setValue={(value) => {
+                if (value !== "") {
+                  let newFlow = _.cloneDeep(flow);
+                  newFlow.name = value;
+                  handleSaveFlow(newFlow);
+                }
+              }}
+              rename={rename}
+              setRename={setRename}
+            />
           </div>
           <div className="flex gap-5">
-            {/* make the icons shake a bit on hover */}
             <Edit
               className="w-4"
               onClick={() => {
@@ -68,13 +80,23 @@ export const CardComponent = ({
             />
           </div>
         </CardTitle>
-        <CardDescription className="pt-2 pb-2">
-          <div className="truncate-doubleline">
-            {idx === 0
-              ? "This flow creates an agent that accesses a department store database and APIs to monitor customer activity and overall storage."
-              : "This is a new Flow"}
-            {/* {flow.description} */}
-          </div>
+        <CardDescription className="pt-2 pb-2 h-10">
+          {/* <div className="flex gap-2"> */}
+          <RenameLabel
+            className="truncate-doubleline w-full h-full"
+            placeholder="Description"
+            value={flow.description || "Description"}
+            setValue={(value) => {
+              if (value !== "") {
+                let newFlow = _.cloneDeep(flow);
+                newFlow.description = value;
+                handleSaveFlow(newFlow);
+              }
+            }}
+            rename={rename}
+            setRename={setRename}
+          />
+          {/* </div> */}
         </CardDescription>
       </CardHeader>