diff --git a/src/components/quickstart/WelcomeModal.tsx b/src/components/quickstart/WelcomeModal.tsx
index 09b083fd..02f1e8a1 100644
--- a/src/components/quickstart/WelcomeModal.tsx
+++ b/src/components/quickstart/WelcomeModal.tsx
@@ -6,6 +6,7 @@ import { QuickstartView } from "@/types/quickstart";
 import { QuickstartInitialView } from "./QuickstartInitialView";
 import { TemplateExplorerView } from "./TemplateExplorerView";
 import { PromptWorkflowView } from "./PromptWorkflowView";
+import { WorkflowBrowserView } from "./WorkflowBrowserView";
 
 interface WelcomeModalProps {
   onWorkflowGenerated: (workflow: WorkflowFile, directoryPath?: string) => void;
@@ -32,35 +33,9 @@ export function WelcomeModal({
     setCurrentView("vibe");
   }, []);
 
-  const handleSelectLoad = useCallback(async () => {
-    try {
-      const browseRes = await fetch("/api/browse-directory");
-      const browseResult = await browseRes.json();
-
-      if (!browseResult.success || browseResult.cancelled || !browseResult.path) {
-        if (!browseResult.success && !browseResult.cancelled) {
-          alert(browseResult.error || "Failed to open directory picker");
-        }
-        return;
-      }
-
-      const dirPath = browseResult.path;
-
-      const loadRes = await fetch(`/api/workflow?path=${encodeURIComponent(dirPath)}&load=true`);
-      const loadResult = await loadRes.json();
-
-      if (!loadResult.success) {
-        alert(loadResult.error || "No workflow file found in directory");
-        return;
-      }
-
-      const workflow = loadResult.workflow as WorkflowFile;
-      onWorkflowGenerated(workflow, dirPath);
-    } catch (error) {
-      console.error("Failed to open workflow:", error);
-      alert("Failed to open workflow. Please try again.");
-    }
-  }, [onWorkflowGenerated]);
+  const handleSelectLoad = useCallback(() => {
+    setCurrentView("browse");
+  }, []);
 
   const handleBack = useCallback(() => {
     setCurrentView("initial");
@@ -75,7 +50,7 @@ export function WelcomeModal({
 
   // Template explorer needs more width for two-column layout
   const dialogWidth = currentView === "templates" ? "max-w-6xl" : "max-w-2xl";
-  const dialogHeight = currentView === "templates" ? "max-h-[85vh]" : "max-h-[80vh]";
+  const dialogHeight = currentView === "templates" || currentView === "browse" ? "max-h-[85vh]" : "max-h-[80vh]";
 
   return (
     <div
@@ -104,6 +79,15 @@ export function WelcomeModal({
             onWorkflowGenerated={handleWorkflowSelected}
           />
         )}
+        {currentView === "browse" && (
+          <WorkflowBrowserView
+            onBack={handleBack}
+            onWorkflowLoaded={(workflow, dirPath) =>
+              onWorkflowGenerated(workflow, dirPath)
+            }
+            onClose={onClose}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/src/types/quickstart.ts b/src/types/quickstart.ts
index 272c8449..ad87cad3 100644
--- a/src/types/quickstart.ts
+++ b/src/types/quickstart.ts
@@ -1,6 +1,6 @@
 import type { NodeType } from "./nodes";
 
-export type QuickstartView = "initial" | "templates" | "vibe";
+export type QuickstartView = "initial" | "templates" | "vibe" | "browse";
 
 export type TemplateCategory = "simple" | "advanced" | "community";