diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 42eec6f76..e4f7a30ab 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -480,7 +480,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index 5bd536e8d..4f1a0b885 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -20,6 +20,7 @@ import EmptyComponent from "../emptyComponent";
 import HeaderComponent from "../headerComponent";
 import { downloadFlow, removeApiKeys } from "../../../../utils/reactflowUtils";
 import { useDarkStore } from "../../../../stores/darkStore";
+import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 
 export default function ComponentsComponent({
   type = "all",
@@ -156,6 +157,26 @@ export default function ComponentsComponent({
     });
   };
 
+  const handleImport = () => {
+    uploadFlow({ newProject: true, isComponent: false })
+      .then(() => {
+        resetFilter();
+        getFoldersApi(true);
+        if (!folderId || folderId === myCollectionId) {
+          getFolderById(folderId ? folderId : myCollectionId);
+        }
+        setSelectedFlowsComponentsCards([]);
+
+        setSuccessData({ title: "Flows imported successfully" });
+      })
+      .catch((error) => {
+        setErrorData({
+          title: UPLOAD_ERROR_ALERT,
+          list: [error],
+        });
+      });
+  };
+
   const version = useDarkStore((state) => state.version);
 
   const handleExport = () => {
@@ -252,6 +273,7 @@ export default function ComponentsComponent({
           handleSelectAll={handleSelectAll}
           handleDuplicate={() => handleSelectOptionsChange("duplicate")}
           handleExport={() => handleSelectOptionsChange("export")}
+          handleImport={() => handleImport()}
           disableFunctions={!(selectedFlowsComponentsCards?.length > 0)}
         />
       )}
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
index e5145fd83..a4fd7cfb4 100644
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@@ -12,6 +12,7 @@ type HeaderComponentProps = {
   handleDelete: () => void;
   handleDuplicate: () => void;
   handleExport: () => void;
+  handleImport: () => void;
   disableFunctions: boolean;
 };
 
@@ -20,6 +21,7 @@ const HeaderComponent = ({
   handleDelete,
   handleDuplicate,
   handleExport,
+  handleImport,
   disableFunctions,
 }: HeaderComponentProps) => {
   const [shouldSelectAll, setShouldSelectAll] = useState(true);
@@ -36,7 +38,7 @@ const HeaderComponent = ({
           <Button
             variant="outline"
             size="sm"
-            onClick={handleClick}
+            onClick={handleImport}
             className="text-sm"
           >
             <ForwardedIconComponent