diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 1b0901c60..659e308ca 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -880,5 +880,5 @@ export const LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV =
   Number(process.env.ACCESS_TOKEN_EXPIRE_SECONDS) -
   Number(process.env.ACCESS_TOKEN_EXPIRE_SECONDS) * 0.1;
 export const TEXT_FIELD_TYPES: string[] = ["str", "SecretStr"];
-export const NODE_WIDTH = 384;
+export const NODE_WIDTH = 400;
 export const NODE_HEIGHT = NODE_WIDTH * 3;
diff --git a/src/frontend/src/hooks/flows/use-upload-flow.ts b/src/frontend/src/hooks/flows/use-upload-flow.ts
index 4466500bd..7d225e20c 100644
--- a/src/frontend/src/hooks/flows/use-upload-flow.ts
+++ b/src/frontend/src/hooks/flows/use-upload-flow.ts
@@ -3,6 +3,7 @@ import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
 import useFlowStore from "@/stores/flowStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowType } from "@/types/flow";
+import { processDataFromFlow } from "@/utils/reactflowUtils";
 import useAddFlow from "./use-add-flow";
 
 const useUploadFlow = () => {
@@ -56,6 +57,10 @@ const useUploadFlow = () => {
   }): Promise<void> => {
     try {
       let flows = await getFlowsToUpload({ files });
+      for (const flow of flows) {
+        await processDataFromFlow(flow);
+      }
+
       if (
         isComponent !== undefined &&
         flows.every(
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index cddddeb05..b05c3b838 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -161,7 +161,11 @@ export default function Page({
 
   useEffect(() => {
     if (reactFlowInstance && currentFlowId) {
-      reactFlowInstance!.setViewport(viewport);
+      if (viewport.x == 0 && viewport.y == 0) {
+        reactFlowInstance.fitView();
+      } else {
+        reactFlowInstance.setViewport(viewport);
+      }
     }
   }, [currentFlowId, reactFlowInstance]);
 
diff --git a/src/frontend/src/utils/layoutUtils.ts b/src/frontend/src/utils/layoutUtils.ts
index b998d98a9..990da635b 100644
--- a/src/frontend/src/utils/layoutUtils.ts
+++ b/src/frontend/src/utils/layoutUtils.ts
@@ -7,9 +7,14 @@ import { Edge } from "reactflow";
 const layoutOptions = {
   "elk.algorithm": "layered",
   "elk.direction": "RIGHT",
+  "elk.components.direction": "DOWN",
   "elk.layered.spacing.edgeNodeBetweenLayers": "40",
   "elk.spacing.nodeNode": "40",
-  "elk.layered.nodePlacement.strategy": "SIMPLE",
+  "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+  "elk.separateConnectedComponents": true,
+  "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+  "elk.spacing.componentComponent": `${NODE_WIDTH}`,
+  "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
 };
 const elk = new ELK();
 
@@ -54,7 +59,6 @@ export const getLayoutedNodes = async (nodes: NodeType[], edges: Edge[]) => {
       targets: [e.targetHandle || e.target],
     })),
   };
-
   const layoutedGraph = await elk.layout(graph);
 
   const layoutedNodes = nodes.map((node) => {
@@ -71,6 +75,5 @@ export const getLayoutedNodes = async (nodes: NodeType[], edges: Edge[]) => {
       type: "genericNode",
     };
   });
-
   return layoutedNodes;
 };
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 9eb93843e..5e04f906c 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -306,7 +306,7 @@ export const processFlows = (DbData: FlowType[], skipUpdate = true) => {
   return { data: savedComponents, flows: DbData };
 };
 
-const needsLayout = (nodes: NodeType[]) => {
+export const needsLayout = (nodes: NodeType[]) => {
   return nodes.some((node) => !node.position);
 };