diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx
index 50057cf18..11ccb8bc7 100644
--- a/src/frontend/src/contexts/flowsContext.tsx
+++ b/src/frontend/src/contexts/flowsContext.tsx
@@ -58,6 +58,7 @@ const FlowsContextInitialValue: FlowsContextType = {
   setTabId: (index: string) => {},
   isLoading: true,
   flows: [],
+  refreshFlows: () => {},
   removeFlow: (id: string) => {},
   addFlow: async (newProject: boolean, flowData?: FlowType) => "",
   updateFlow: (newFlow: FlowType) => {},
@@ -760,6 +761,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
         tabId,
         setTabId,
         flows,
+        refreshFlows,
         incrementNodeId,
         removeFlow,
         addFlow,
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index a5b60dc7d..cedcf2aa5 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -27,6 +27,7 @@ export default function ComponentsComponent({
 
   useEffect(() => {
     setAllData(flows.filter((f) => f.is_component === is_component));
+    console.log(allData);
   }, [flows]);
 
   useEffect(() => {
@@ -80,11 +81,23 @@ export default function ComponentsComponent({
           <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
             {!isLoading || data?.length > 0 ? (
               data
-                ?.sort(
-                  (a, b) =>
-                    new Date(b?.date_created!).getTime() -
-                    new Date(a?.date_created!).getTime()
-                )
+                ?.sort((a, b) => {
+                  if (a?.updated_at && b?.updated_at) {
+                    return (
+                      new Date(b?.updated_at!).getTime() -
+                      new Date(a?.updated_at!).getTime()
+                    );
+                  } else if (a?.updated_at && !b?.updated_at) {
+                    return -1;
+                  } else if (!a?.updated_at && b?.updated_at) {
+                    return 1;
+                  } else {
+                    return (
+                      new Date(b?.date_created!).getTime() -
+                      new Date(a?.date_created!).getTime()
+                    );
+                  }
+                })
                 .map((item, idx) => (
                   <CollectionCardComponent
                     onDelete={() => {
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index f59b4a8a3..e2f2c3f72 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -17,6 +17,7 @@ export default function HomePage(): JSX.Element {
     addFlow,
     removeFlow,
     uploadFlow,
+    refreshFlows,
     isLoading,
   } = useContext(FlowsContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
@@ -62,6 +63,7 @@ export default function HomePage(): JSX.Element {
   // Set a null id
   useEffect(() => {
     setTabId("");
+    refreshFlows();
   }, []);
   const navigate = useNavigate();
 
diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts
index 471de4706..e66c96304 100644
--- a/src/frontend/src/types/flow/index.ts
+++ b/src/frontend/src/types/flow/index.ts
@@ -10,6 +10,7 @@ export type FlowType = {
   is_component: boolean;
   parent?: string;
   date_created?: string;
+  updated_at?: string;
   last_tested_version?: string;
 };
 export type NodeType = {
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 1599aa94e..d2aa2c8c2 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -7,6 +7,7 @@ export type FlowsContextType = {
   isLoading: boolean;
   setTabId: (index: string) => void;
   flows: Array<FlowType>;
+  refreshFlows: () => void;
   removeFlow: (id: string) => void;
   addFlow: (
     newProject: boolean,