diff --git a/apps/app/components/pipeline/create-pipeline.tsx b/apps/app/components/pipeline/create-pipeline.tsx
index 651439dd..458e5334 100644
--- a/apps/app/components/pipeline/create-pipeline.tsx
+++ b/apps/app/components/pipeline/create-pipeline.tsx
@@ -14,11 +14,13 @@ import { createPipelineFromFormData } from "@/app/api/pipelines/create";
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import { LoaderCircleIcon } from "lucide-react";
+import PipelineParamsSelector from "./pipeline-params-selector";
 
 export default function CreatePipeline() {
   const { authenticated, user, ready: isAuthLoaded } = usePrivy();
   const [formData, setFormData] = useState<Record<string, unknown>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1);
   const router = useRouter();
 
   const handleChange = (
@@ -26,10 +28,46 @@ export default function CreatePipeline() {
     id: string
   ) => {
     setFormData((prev) => ({ ...prev, [id]: e.target.value }));
-    console.log(formData);
   };
 
-  const handleSubmit = async () => {
+  const handleNext = async () => {
+
+    if (!formData.name) {
+      toast.error("Please enter a name");
+      return;
+    }
+    if (!formData.description) {
+      toast.error("Please enter a description");
+      return;
+    }
+    if (!formData.comfyJson) {
+      toast.error("Please upload a ComfyUI JSON file");
+      return;
+    }
+
+    try {
+      const jsonFile = formData.comfyJson as File;
+      const jsonContent = await jsonFile.text();
+      const parsedJson = JSON.parse(jsonContent);
+      
+      setFormData(prev => ({
+        ...prev,
+        comfyJson: parsedJson
+      }));
+      
+      setCurrentStep(2);
+    } catch (error) {
+      console.error("Error parsing JSON:", error);
+      toast.error("Invalid JSON file");
+      return;
+    }
+  };
+
+  const handleBack = () => {
+    setCurrentStep(1);
+  };
+
+  const handleSubmit = async (updatedFormData: Record<string, unknown>) => {
     if (!user?.id) {
       toast.error("User not found");
       return;
@@ -38,23 +76,29 @@ export default function CreatePipeline() {
     const toastId = toast.loading("Creating pipeline...");
     try {
       const formDataToSend = new FormData();
-      Object.entries(formData).forEach(([key, value]) => {
-        formDataToSend.append(decamelize(key), value as any);
+      Object.entries(updatedFormData).forEach(([key, value]) => {
+        if (key === 'comfyJson') {
+          // Create a new File object from the JSON string
+          const jsonBlob = new Blob([JSON.stringify(value)], { type: 'application/json' });
+          formDataToSend.append(decamelize(key), jsonBlob, 'workflow.json');
+        } else {
+          formDataToSend.append(decamelize(key), value as any);
+        }
       });
+
       const { pipeline, smokeTestStream } = await createPipelineFromFormData(
         formDataToSend,
         user.id
       );
-      console.log("Pipeline created::Client::", pipeline);
       router.push(
         `/pipelines/${pipeline.id}?streamId=${smokeTestStream.id}&validation=true`
       );
       toast.dismiss(toastId);
       toast.success("Pipeline created successfully");
     } catch (error) {
+      console.error("Error details:", error);
       toast.dismiss(toastId);
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
+      const errorMessage = error instanceof Error ? error.message : String(error);
       toast.error(`Failed to create pipeline: ${errorMessage}`);
     } finally {
       setIsSubmitting(false);
@@ -84,65 +128,75 @@ export default function CreatePipeline() {
     <div className="p-4">
       <h3 className="font-medium text-lg">Create pipeline</h3>
       <ScrollArea className="h-[90vh] max-w-xl w-full">
-        <div className="space-y-4 mt-4 p-0.5">
-          <div className="space-y-1.5">
-            <Label className="text-muted-foreground">Name</Label>
-            <Input
-              placeholder="e.g., Live Portrait Generator"
-              id="name"
-              onChange={(e) => handleChange(e, "name")}
-            />
-          </div>
+        {currentStep === 1 ? (
+          <div className="space-y-4 mt-4 p-0.5">
+            {/* Step 1 - Pipeline creation form */}
+            <div className="space-y-1.5">
+              <Label className="text-muted-foreground">Name</Label>
+              <Input
+                placeholder="e.g., Live Portrait Generator"
+                id="name"
+                onChange={(e) => handleChange(e, "name")}
+              />
+            </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-muted-foreground">Version</Label>
-            <Input
-              defaultValue="1.0.0"
-              placeholder="e.g., 1.0.0 in format major.minor.patch"
-              id="version"
-              onChange={(e) => handleChange(e, "version")}
-            />
-          </div>
+            <div className="space-y-1.5">
+              <Label className="text-muted-foreground">Version</Label>
+              <Input
+                value={formData.version as string || "1.0.0"}
+                placeholder="e.g., 1.0.0 in format major.minor.patch"
+                id="version"
+                onChange={(e) => handleChange(e, "version")}
+              />
+            </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-muted-foreground">Description</Label>
-            <Textarea
-              placeholder="Describe what your pipeline does and its use cases"
-              id="description"
-              className="h-24"
-              onChange={(e) => handleChange(e, "description")}
-            />
-          </div>
+            <div className="space-y-1.5">
+              <Label className="text-muted-foreground">Description</Label>
+              <Textarea
+                placeholder="Describe what your pipeline does and its use cases"
+                id="description"
+                className="h-24"
+                onChange={(e) => handleChange(e, "description")}
+              />
+            </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-muted-foreground">Cover image</Label>
-            <FileUploadDropzone
-              placeholder="Upload cover image"
-              id="coverImage"
-              setFormData={setFormData}
-              fileType={FileType.Image}
-            />
-          </div>
+            <div className="space-y-1.5">
+              <Label className="text-muted-foreground">Cover image</Label>
+              <FileUploadDropzone
+                placeholder="Upload cover image"
+                id="coverImage"
+                setFormData={setFormData}
+                fileType={FileType.Image}
+              />
+            </div>
 
-          <div className="space-y-1.5">
-            <Label className="text-muted-foreground">ComfyUI JSON</Label>
-            <FileUploadDropzone
-              placeholder="Upload your ComfyUI workflow JSON"
-              id="comfyJson"
-              setFormData={setFormData}
-              fileType={FileType.Json}
-            />
-          </div>
-          <div className="flex">
-            <Button
-              className="mt-4 uppercase text-xs"
-              onClick={handleSubmit}
-              disabled={isSubmitting}
-            >
-              Create
-            </Button>
+            <div className="space-y-1.5">
+              <Label className="text-muted-foreground">ComfyUI JSON</Label>
+              <FileUploadDropzone
+                placeholder="Upload your ComfyUI workflow JSON"
+                id="comfyJson"
+                setFormData={setFormData}
+                fileType={FileType.Json}
+              />
+            </div>
+
+            <div className="flex">
+              <Button
+                className="mt-4 uppercase text-xs"
+                onClick={handleNext}
+              >
+                Next
+              </Button>
+            </div>
           </div>
-        </div>
+        ) : (
+          <PipelineParamsSelector
+            formData={formData}
+            onBack={handleBack}
+            onSubmit={handleSubmit}
+            isSubmitting={isSubmitting}
+          />
+        )}
       </ScrollArea>
     </div>
   );
diff --git a/apps/app/components/pipeline/pipeline-params-selector.tsx b/apps/app/components/pipeline/pipeline-params-selector.tsx
new file mode 100644
index 00000000..88f7807c
--- /dev/null
+++ b/apps/app/components/pipeline/pipeline-params-selector.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@repo/design-system/components/ui/button";
+import { Input } from "@repo/design-system/components/ui/input";
+import { Label } from "@repo/design-system/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@repo/design-system/components/ui/select";
+
+import { PlusIcon, XIcon } from "lucide-react";
+
+interface Parameter {
+  nodeId: string;
+  field: string;
+  name: string;
+  description: string;
+}
+
+interface PipelineParamsSelectorProps {
+  formData: Record<string, unknown>;
+  onBack: () => void;
+  onSubmit: (data: Record<string, unknown>) => void;
+  isSubmitting: boolean;
+}
+
+export default function PipelineParamsSelector({
+  formData,
+  onBack,
+  onSubmit,
+  isSubmitting,
+}: PipelineParamsSelectorProps) {
+  const [parameters, setParameters] = useState<Parameter[]>([]);
+  const comfyJson = formData.comfyJson as Record<string, any>;
+
+  // Extract available nodes and their class types
+  const nodes = Object.entries(comfyJson).map(([nodeId, node]: [string, any]) => ({
+    id: nodeId,
+    classType: node.class_type,
+    fields: Object.keys(node.inputs || {})
+  }));
+
+  const addParameter = () => {
+    if (parameters.length >= 5) {
+      return;
+    }
+    setParameters([...parameters, {
+      nodeId: "",
+      field: "",
+      name: "",
+      description: ""
+    }]);
+  };
+
+  const removeParameter = (index: number) => {
+    setParameters(parameters.filter((_, i) => i !== index));
+  };
+
+  const updateParameter = (index: number, field: keyof Parameter, value: string) => {
+    const newParameters = [...parameters];
+    newParameters[index] = {
+      ...newParameters[index],
+      [field]: value
+    };
+    setParameters(newParameters);
+  };
+
+  const handleSubmit = () => {
+    const updatedFormData = {
+      ...formData,
+      prioritizedParameters: parameters
+    };
+    onSubmit(updatedFormData);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h4 className="text-lg font-medium">Step 2: Parameter Display</h4>
+        <p className="text-sm text-muted-foreground mt-1">
+          Select up to 5 important parameters that should always be visible for users.
+          All other parameters will be available, but collapsed by default.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        {parameters.map((param, index) => (
+          <div key={index} className="flex gap-4 items-start">
+            <div className="flex-1 space-y-4">
+              <div className="grid grid-cols-4 gap-4">
+                <div>
+                  <Label>Node</Label>
+                  <Select
+                    value={param.nodeId}
+                    onValueChange={(value) => updateParameter(index, "nodeId", value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select node" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {nodes.map((node) => (
+                        <SelectItem key={node.id} value={node.id}>
+                          {node.classType}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label>Field</Label>
+                  <Select
+                    value={param.field}
+                    onValueChange={(value) => updateParameter(index, "field", value)}
+                    disabled={!param.nodeId}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select field" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {param.nodeId && 
+                        nodes
+                          .find(n => n.id === param.nodeId)
+                          ?.fields.map((field) => (
+                            <SelectItem key={field} value={field}>
+                              {field}
+                            </SelectItem>
+                          ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div>
+                  <Label>Display Name</Label>
+                  <Input
+                    value={param.name}
+                    onChange={(e) => updateParameter(index, "name", e.target.value)}
+                    placeholder="Parameter name"
+                  />
+                </div>
+
+                <div>
+                  <Label>Description</Label>
+                  <Input
+                    value={param.description}
+                    onChange={(e) => updateParameter(index, "description", e.target.value)}
+                    placeholder="Parameter description"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => removeParameter(index)}
+              className="mt-6"
+            >
+              <XIcon className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+
+        {parameters.length < 5 && (
+          <Button
+            variant="outline"
+            onClick={addParameter}
+            className="w-full"
+          >
+            <PlusIcon className="h-4 w-4 mr-2" />
+            Add Parameter
+          </Button>
+        )}
+      </div>
+
+      <div className="flex space-x-4">
+        <Button
+          variant="outline"
+          onClick={onBack}
+          className="uppercase text-xs"
+        >
+          Back
+        </Button>
+        <Button
+          onClick={handleSubmit}
+          disabled={isSubmitting || parameters.length === 0}
+          className="uppercase text-xs"
+        >
+          Create
+        </Button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file