diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index c5c510ea8..73db3fc1b 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -417,6 +417,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 
   const addFlow = async (flow?: FlowType): Promise<String> => {
     let flowData = extractDataFromFlow(flow);
+    if(flowData.description == ""){
+      flowData.description = "This is a new flow.";
+    }
   
     // Create a new flow with a default name if no flow is provided.
     const newFlow = createNewFlow(flowData, flow);
diff --git a/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx b/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx
index 2cdd3ce18..4c872f9a7 100644
--- a/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx
@@ -31,8 +31,7 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
-            This flow creates an agent that accesses a department store database
-            and APIs to monitor customer activity and overall storage.
+            {flow.description}
             {/* {flow.description} */}
           </div>
         </CardDescription>
diff --git a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
index ff8fe8eac..88dad5ff1 100644
--- a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
@@ -36,8 +36,7 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
-            This flow creates an agent that accesses a department store database
-            and APIs to monitor customer activity and overall storage.
+            {flow.description}
             {/* {flow.description} */}
           </div>
         </CardDescription>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 16e88e582..c60995f14 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -23,6 +23,7 @@ import _ from "lodash";
 import { updateFlowInDatabase, uploadFlowsToDatabase } from "../../controllers/API";
 import { MenuBar } from "../../components/headerComponent/components/menuBar";
 import { CardComponent } from "./components/cardComponent";
+import { useNavigate } from "react-router-dom";
 export default function HomePage() {
   const {
     flows,
@@ -34,6 +35,7 @@ export default function HomePage() {
   useEffect(() => {
     setTabId("");
   }, [])
+  const navigate = useNavigate();
   return (
       <div
         className="w-full h-full flex overflow-auto flex-col bg-muted px-16"
@@ -53,7 +55,9 @@ export default function HomePage() {
               <Upload className="w-4 mr-2" />
               Upload Database
               </Button>
-              <Button variant="primary" onClick={() => {addFlow();}}>
+              <Button variant="primary" onClick={() => {addFlow().then((id) => {
+                  navigate("/flow/"+id);
+                });}}>
               <Plus className="w-4 mr-2" />
               New Project
               </Button>