From 8b310a464f26f388e562f40d119fcce8c73d51ce Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Mon, 30 Sep 2024 07:12:01 -0700
Subject: [PATCH] Task form redesign (#888)

---
 skyvern-frontend/src/api/types.ts             |   2 +
 .../AutoResizingTextarea.tsx                  |   4 +-
 .../routes/tasks/create/CreateNewTaskForm.tsx | 665 ++++++++--------
 .../tasks/create/CreateNewTaskFormPage.tsx    |   3 +
 .../tasks/create/CreateNewTaskFromPrompt.tsx  |   2 +
 .../src/routes/tasks/create/SavedTaskForm.tsx | 716 ++++++++++--------
 .../routes/tasks/create/TaskFormSection.tsx   |  65 ++
 .../routes/tasks/create/retry/RetryTask.tsx   |   2 +
 8 files changed, 832 insertions(+), 627 deletions(-)
 create mode 100644 skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx

diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts
index 841a7143..3fcd53b0 100644
--- a/skyvern-frontend/src/api/types.ts
+++ b/skyvern-frontend/src/api/types.ts
@@ -77,6 +77,8 @@ export type TaskApiResponse = {
     error_code_mapping: null;
     proxy_location: string;
     extracted_information_schema: string | object;
+    totp_verification_url: string | null;
+    totp_identifier: string | null;
   };
   task_id: string;
   status: Status;
diff --git a/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx b/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx
index 4fb06ecc..a252ef07 100644
--- a/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx
+++ b/skyvern-frontend/src/components/AutoResizingTextarea/AutoResizingTextarea.tsx
@@ -2,7 +2,7 @@ import { useLayoutEffect, useRef } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/util/utils";
 
-type Props = React.ComponentProps<typeof Textarea>;
+type Props = React.ComponentPropsWithoutRef<typeof Textarea>;
 
 function AutoResizingTextarea(props: Props) {
   const ref = useRef<HTMLTextAreaElement>(null);
@@ -26,9 +26,9 @@ function AutoResizingTextarea(props: Props) {
   return (
     <Textarea
       {...props}
+      ref={ref}
       onKeyDown={setSize}
       onInput={setSize}
-      ref={ref}
       rows={1}
       className={cn("min-h-0 resize-none overflow-y-hidden", props.className)}
     />
diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
index 60707486..f84a2169 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
@@ -1,65 +1,47 @@
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
+import { getClient } from "@/api/AxiosClient";
+import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import {
-  dataExtractionGoalDescription,
-  extractedInformationSchemaDescription,
-  navigationGoalDescription,
-  navigationPayloadDescription,
-  urlDescription,
-  webhookCallbackUrlDescription,
-} from "../data/descriptionHelperContent";
-import { Textarea } from "@/components/ui/textarea";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { getClient } from "@/api/AxiosClient";
 import { useToast } from "@/components/ui/use-toast";
-import { InfoCircledIcon, ReloadIcon } from "@radix-ui/react-icons";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { ToastAction } from "@radix-ui/react-toast";
-import { Link } from "react-router-dom";
-import fetchToCurl from "fetch-to-curl";
-import { apiBaseUrl } from "@/util/env";
-import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useApiCredential } from "@/hooks/useApiCredential";
-import { AxiosError } from "axios";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { OrganizationApiResponse } from "@/api/types";
-import { Skeleton } from "@/components/ui/skeleton";
-import { MAX_STEPS_DEFAULT } from "../constants";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { copyText } from "@/util/copyText";
+import { apiBaseUrl } from "@/util/env";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { ToastAction } from "@radix-ui/react-toast";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import fetchToCurl from "fetch-to-curl";
+import { useState } from "react";
+import { useForm, useFormState } from "react-hook-form";
+import { Link } from "react-router-dom";
+import { z } from "zod";
+import { MAX_STEPS_DEFAULT } from "../constants";
+import { TaskFormSection } from "./TaskFormSection";
 
 const createNewTaskFormSchema = z
   .object({
     url: z.string().url({
       message: "Invalid URL",
     }),
-    webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one
+    webhookCallbackUrl: z.string().or(z.null()).optional(),
     navigationGoal: z.string().or(z.null()).optional(),
     dataExtractionGoal: z.string().or(z.null()).optional(),
     navigationPayload: z.string().or(z.null()).optional(),
     extractedInformationSchema: z.string().or(z.null()).optional(),
     maxStepsOverride: z.number().optional(),
+    totpVerificationUrl: z.string().or(z.null()).optional(),
+    totpIdentifier: z.string().or(z.null()).optional(),
   })
   .superRefine(
     (
@@ -125,6 +107,8 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
     proxy_location: "RESIDENTIAL",
     navigation_payload: transform(formValues.navigationPayload),
     extracted_information_schema: extractedInformationSchema,
+    totp_verification_url: transform(formValues.totpVerificationUrl),
+    totp_identifier: transform(formValues.totpIdentifier),
   };
 }
 
@@ -133,36 +117,25 @@ function CreateNewTaskForm({ initialValues }: Props) {
   const { toast } = useToast();
   const credentialGetter = useCredentialGetter();
   const apiCredential = useApiCredential();
-
-  const { data: organizations, isPending } = useQuery<
-    Array<OrganizationApiResponse>
-  >({
-    queryKey: ["organizations"],
-    queryFn: async () => {
-      const client = await getClient(credentialGetter);
-      return await client
-        .get("/organizations")
-        .then((response) => response.data.organizations);
-    },
-  });
-
-  const organization = organizations?.[0];
+  const [sections, setSections] = useState<
+    Array<"base" | "extraction" | "advanced">
+  >(["base"]);
 
   const form = useForm<CreateNewTaskFormValues>({
     resolver: zodResolver(createNewTaskFormSchema),
     defaultValues: initialValues,
     values: {
       ...initialValues,
-      maxStepsOverride: organization?.max_steps_per_run ?? MAX_STEPS_DEFAULT,
+      maxStepsOverride: MAX_STEPS_DEFAULT,
     },
   });
+  const { errors } = useFormState({ control: form.control });
 
   const mutation = useMutation({
     mutationFn: async (formValues: CreateNewTaskFormValues) => {
       const taskRequest = createTaskRequestObject(formValues);
       const client = await getClient(credentialGetter);
       const includeOverrideHeader =
-        formValues.maxStepsOverride !== organization?.max_steps_per_run &&
         formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
       return client.post<
         ReturnType<typeof createTaskRequestObject>,
@@ -222,257 +195,347 @@ function CreateNewTaskForm({ initialValues }: Props) {
     mutation.mutate(values);
   }
 
+  function toggleSectionVisibility(
+    section: "base" | "extraction" | "advanced",
+  ) {
+    setSections((sections) => {
+      if (sections.includes(section)) {
+        return sections.filter((s) => s !== section);
+      }
+      return [...sections, section];
+    });
+  }
+
+  function isActive(section: "base" | "extraction" | "advanced") {
+    return sections.includes(section);
+  }
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="url"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  URL *
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{urlDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>The starting URL for the task</FormDescription>
-              <FormControl>
-                <Input placeholder="example.com" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="navigationGoal"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Navigation Goal
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{navigationGoalDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>
-                How do you want Skyvern to navigate? Use words like COMPLETE and
-                TERMINATE to let Skyvern know when to finish navigating
-              </FormDescription>
-              <FormControl>
-                <Textarea
-                  rows={5}
-                  placeholder="Navigation Goal"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="dataExtractionGoal"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Data Extraction Goal
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{dataExtractionGoalDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>
-                If you want Skyvern to extract data after it's finished
-                navigating
-              </FormDescription>
-              <FormControl>
-                <Textarea
-                  rows={5}
-                  placeholder="Data Extraction Goal"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Accordion type="single" collapsible>
-          <AccordionItem value="advanced-settings">
-            <AccordionTrigger>Advanced Settings</AccordionTrigger>
-            <AccordionContent className="space-y-8 px-1 py-4">
-              <FormField
-                control={form.control}
-                name="navigationPayload"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <div className="flex gap-2">
-                        Navigation Payload
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <InfoCircledIcon />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-[250px]">
-                              <p>{navigationPayloadDescription}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                    </FormLabel>
-                    <FormDescription>
-                      Any context Skyvern needs to complete its actions (ex.
-                      text that may be required to fill out forms)
-                    </FormDescription>
-                    <FormControl>
-                      <Textarea
-                        rows={5}
-                        placeholder="Navigation Payload"
-                        {...field}
-                        value={field.value === null ? "" : field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="extractedInformationSchema"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <div className="flex gap-2">
-                        Extracted Information Schema
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <InfoCircledIcon />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-[250px]">
-                              <p>{extractedInformationSchemaDescription}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                    </FormLabel>
-                    <FormDescription>
-                      Jsonc schema to force the json format for extracted
-                      information
-                    </FormDescription>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Extracted Information Schema"
-                        rows={5}
-                        {...field}
-                        value={field.value === null ? "" : field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="webhookCallbackUrl"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <div className="flex gap-2">
-                        Webhook Callback URL
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <InfoCircledIcon />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-[250px]">
-                              <p>{webhookCallbackUrlDescription}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                    </FormLabel>
-                    <FormDescription>
-                      The URL of a webhook endpoint to send the extracted
-                      information
-                    </FormDescription>
-                    <FormControl>
-                      <Input
-                        placeholder="example.com"
-                        {...field}
-                        value={field.value === null ? "" : field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="maxStepsOverride"
-                render={({ field }) => {
-                  return (
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <TaskFormSection
+          index={1}
+          title="Base Content"
+          active={isActive("base")}
+          onClick={() => {
+            toggleSectionVisibility("base");
+          }}
+          hasError={
+            typeof errors.url !== "undefined" ||
+            typeof errors.navigationGoal !== "undefined"
+          }
+        >
+          {isActive("base") && (
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Max Steps</FormLabel>
-                      <FormDescription>
-                        Max steps for this task. This will override your
-                        organization wide setting.
-                      </FormDescription>
-                      <FormControl>
-                        {isPending ? (
-                          <Skeleton className="h-8" />
-                        ) : (
-                          <Input
-                            {...field}
-                            type="number"
-                            min={1}
-                            max={
-                              organization?.max_steps_per_run ??
-                              MAX_STEPS_DEFAULT
-                            }
-                            value={field.value ?? MAX_STEPS_DEFAULT}
-                            onChange={(event) => {
-                              field.onChange(parseInt(event.target.value));
-                            }}
-                          />
-                        )}
-                      </FormControl>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">URL</h1>
+                            <h2 className="text-base text-slate-400">
+                              The starting URL for the task
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input placeholder="https://" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
                     </FormItem>
-                  );
-                }}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="navigationGoal"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Navigation Goal</h1>
+                            <h2 className="text-base text-slate-400">
+                              Where should Skyvern go and what should Skyvern
+                              do?
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <AutoResizingTextarea
+                              placeholder="Use terms like complete or terminate to give completion directions"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          )}
+        </TaskFormSection>
+        <TaskFormSection
+          index={2}
+          title="Extraction"
+          active={isActive("extraction")}
+          onClick={() => {
+            toggleSectionVisibility("extraction");
+          }}
+          hasError={
+            typeof errors.dataExtractionGoal !== "undefined" ||
+            typeof errors.extractedInformationSchema !== "undefined"
+          }
+        >
+          {isActive("extraction") && (
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="dataExtractionGoal"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Data Extraction Goal</h1>
+                            <h2 className="text-base text-slate-400">
+                              What outputs are you looking to get?
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <AutoResizingTextarea
+                              placeholder="e.g. Extract the product price..."
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="extractedInformationSchema"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Data Schema</h1>
+                            <h2 className="text-base text-slate-400">
+                              Specify the output format in JSON
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <CodeEditor
+                              {...field}
+                              language="json"
+                              fontSize={12}
+                              minHeight="96px"
+                              value={
+                                field.value === null ||
+                                typeof field.value === "undefined"
+                                  ? ""
+                                  : field.value
+                              }
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          )}
+        </TaskFormSection>
+        <TaskFormSection
+          index={3}
+          title="Advanced Settings"
+          active={isActive("advanced")}
+          onClick={() => {
+            toggleSectionVisibility("advanced");
+          }}
+          hasError={
+            typeof errors.navigationPayload !== "undefined" ||
+            typeof errors.maxStepsOverride !== "undefined" ||
+            typeof errors.webhookCallbackUrl !== "undefined"
+          }
+        >
+          {isActive("advanced") && (
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="navigationPayload"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Navigation Payload</h1>
+                            <h2 className="text-base text-slate-400">
+                              Specify important parameters, routes, or states
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <CodeEditor
+                              {...field}
+                              language="json"
+                              fontSize={12}
+                              minHeight="96px"
+                              value={
+                                field.value === null ||
+                                typeof field.value === "undefined"
+                                  ? ""
+                                  : field.value
+                              }
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="maxStepsOverride"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Max Steps Override</h1>
+                            <h2 className="text-base text-slate-400">
+                              Want to allow this task to execute more or less
+                              steps than the default?
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              {...field}
+                              type="number"
+                              min={1}
+                              value={field.value}
+                              onChange={(event) => {
+                                field.onChange(parseInt(event.target.value));
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="webhookCallbackUrl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Webhook Callback URL</h1>
+                            <h2 className="text-base text-slate-400">
+                              The URL of a webhook endpoint to send the
+                              extracted information
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              placeholder="https://"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="totpVerificationUrl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">TOTP Verification URL</h1>
+                            <h2 className="text-base text-slate-400"></h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              placeholder="https://"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="totpIdentifier"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">TOTP Identifier</h1>
+                            <h2 className="text-base text-slate-400"></h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              placeholder="Idenfitifer"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          )}
+        </TaskFormSection>
 
         <div className="flex justify-end gap-3">
           <Button
diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
index 7aa372c7..718f8428 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
@@ -64,6 +64,9 @@ function CreateNewTaskFormPage() {
         extractedInformationSchema: JSON.stringify(dataSchema, null, 2),
         navigationPayload,
         maxSteps,
+        totpIdentifier: data.workflow_definition.blocks[0].totp_identifier,
+        totpVerificationUrl:
+          data.workflow_definition.blocks[0].totp_verification_url,
       }}
     />
   );
diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFromPrompt.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFromPrompt.tsx
index 4622f18f..5c02bef5 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFromPrompt.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskFromPrompt.tsx
@@ -33,6 +33,8 @@ function CreateNewTaskFromPrompt() {
           ),
           navigationPayload: JSON.stringify(state.navigation_payload, null, 2),
           webhookCallbackUrl: "",
+          totpIdentifier: null,
+          totpVerificationUrl: null,
         }}
       />
     </section>
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
index 9bd65e43..9174c46e 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
@@ -1,55 +1,36 @@
 import { getClient } from "@/api/AxiosClient";
+import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/components/ui/use-toast";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
+import { SubmitEvent } from "@/types";
+import { copyText } from "@/util/copyText";
 import { apiBaseUrl } from "@/util/env";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { InfoCircledIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { ReloadIcon } from "@radix-ui/react-icons";
 import { ToastAction } from "@radix-ui/react-toast";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 import fetchToCurl from "fetch-to-curl";
+import { useState } from "react";
 import { useForm, useFormState } from "react-hook-form";
 import { Link, useParams } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
 import { z } from "zod";
-import {
-  dataExtractionGoalDescription,
-  extractedInformationSchemaDescription,
-  navigationGoalDescription,
-  navigationPayloadDescription,
-  urlDescription,
-  webhookCallbackUrlDescription,
-} from "../data/descriptionHelperContent";
-import { SubmitEvent } from "@/types";
-import { AxiosError } from "axios";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { OrganizationApiResponse } from "@/api/types";
 import { MAX_STEPS_DEFAULT } from "../constants";
-import { Skeleton } from "@/components/ui/skeleton";
-import { copyText } from "@/util/copyText";
+import { TaskFormSection } from "./TaskFormSection";
 
 const savedTaskFormSchema = z
   .object({
@@ -59,12 +40,14 @@ const savedTaskFormSchema = z
       message: "Invalid URL",
     }),
     proxyLocation: z.string().or(z.null()).optional(),
-    webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one
+    webhookCallbackUrl: z.string().or(z.null()).optional(),
     navigationGoal: z.string().or(z.null()).optional(),
     dataExtractionGoal: z.string().or(z.null()).optional(),
     navigationPayload: z.string().or(z.null()).optional(),
     extractedInformationSchema: z.string().or(z.null()).optional(),
     maxSteps: z.number().optional(),
+    totpVerificationUrl: z.string().or(z.null()).optional(),
+    totpIdentifier: z.string().or(z.null()).optional(),
   })
   .superRefine(
     (
@@ -131,6 +114,8 @@ function createTaskRequestObject(formValues: SavedTaskFormValues) {
     error_code_mapping: null,
     navigation_payload: transform(formValues.navigationPayload),
     extracted_information_schema: extractedInformationSchema,
+    totp_verification_url: transform(formValues.totpVerificationUrl),
+    totp_identifier: transform(formValues.totpIdentifier),
   };
 }
 
@@ -170,6 +155,8 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
           data_extraction_goal: values.dataExtractionGoal,
           data_schema: extractedInformationSchema,
           max_steps_per_run: values.maxSteps,
+          totp_verification_url: values.totpVerificationUrl,
+          totp_identifier: values.totpIdentifier,
         },
       ],
     },
@@ -182,34 +169,20 @@ function SavedTaskForm({ initialValues }: Props) {
   const credentialGetter = useCredentialGetter();
   const apiCredential = useApiCredential();
   const { template } = useParams();
-
-  const { data: organizations, isPending: organizationIsPending } = useQuery<
-    Array<OrganizationApiResponse>
-  >({
-    queryKey: ["organizations"],
-    queryFn: async () => {
-      const client = await getClient(credentialGetter);
-      return await client
-        .get("/organizations")
-        .then((response) => response.data.organizations);
-    },
-  });
-
-  const organization = organizations?.[0];
+  const [section, setSection] = useState<"base" | "extraction" | "advanced">(
+    "base",
+  );
 
   const form = useForm<SavedTaskFormValues>({
     resolver: zodResolver(savedTaskFormSchema),
     defaultValues: initialValues,
     values: {
       ...initialValues,
-      maxSteps:
-        initialValues.maxSteps ??
-        organization?.max_steps_per_run ??
-        MAX_STEPS_DEFAULT,
+      maxSteps: initialValues.maxSteps ?? MAX_STEPS_DEFAULT,
     },
   });
 
-  const { isDirty } = useFormState({ control: form.control });
+  const { isDirty, errors } = useFormState({ control: form.control });
 
   const createAndSaveTaskMutation = useMutation({
     mutationFn: async (formValues: SavedTaskFormValues) => {
@@ -226,7 +199,6 @@ function SavedTaskForm({ initialValues }: Props) {
         .then(() => {
           const taskRequest = createTaskRequestObject(formValues);
           const includeOverrideHeader =
-            formValues.maxSteps !== organization?.max_steps_per_run &&
             formValues.maxSteps !== MAX_STEPS_DEFAULT;
           return client.post<
             ReturnType<typeof createTaskRequestObject>,
@@ -338,283 +310,379 @@ function SavedTaskForm({ initialValues }: Props) {
             form.handleSubmit(handleSave)(event);
           }
         }}
-        className="space-y-8"
+        className="space-y-4"
       >
-        <FormField
-          control={form.control}
-          name="title"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Title *</FormLabel>
-              <FormControl>
-                <Input placeholder="Title" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Description</FormLabel>
-              <FormControl>
-                <Textarea placeholder="Description" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="url"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  URL *
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{urlDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>The starting URL for the task</FormDescription>
-              <FormControl>
-                <Input placeholder="example.com" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="navigationGoal"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Navigation Goal
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{navigationGoalDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>
-                How do you want Skyvern to navigate? Use words like COMPLETE and
-                TERMINATE to let Skyvern know when to finish navigating
-              </FormDescription>
-              <FormControl>
-                <Textarea
-                  rows={5}
-                  placeholder="Navigation Goal"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="dataExtractionGoal"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Data Extraction Goal
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{dataExtractionGoalDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>
-                If you want Skyvern to extract data after it's finished
-                navigating
-              </FormDescription>
-              <FormControl>
-                <Textarea
-                  rows={5}
-                  placeholder="Data Extraction Goal"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Accordion type="single" collapsible>
-          <AccordionItem value="advanced-settings">
-            <AccordionTrigger>Advanced Settings</AccordionTrigger>
-            <AccordionContent className="space-y-8 px-1 py-4">
-              <FormField
-                control={form.control}
-                name="navigationPayload"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <div className="flex gap-2">
-                        Navigation Payload
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <InfoCircledIcon />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-[250px]">
-                              <p>{navigationPayloadDescription}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                    </FormLabel>
-                    <FormDescription>
-                      Any context Skyvern needs to complete its actions (ex.
-                      text that may be required to fill out forms)
-                    </FormDescription>
-                    <FormControl>
-                      <Textarea
-                        rows={5}
-                        placeholder="Navigation Payload"
-                        {...field}
-                        value={field.value === null ? "" : field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="extractedInformationSchema"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <div className="flex gap-2">
-                        Extracted Information Schema
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <InfoCircledIcon />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-[250px]">
-                              <p>{extractedInformationSchemaDescription}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                    </FormLabel>
-                    <FormDescription>
-                      Jsonc schema to force the json format for extracted
-                      information
-                    </FormDescription>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Extracted Information Schema"
-                        rows={5}
-                        {...field}
-                        value={field.value === null ? "" : field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="webhookCallbackUrl"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>
-                      <div className="flex gap-2">
-                        Webhook Callback URL
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <InfoCircledIcon />
-                            </TooltipTrigger>
-                            <TooltipContent className="max-w-[250px]">
-                              <p>{webhookCallbackUrlDescription}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                    </FormLabel>
-                    <FormDescription>
-                      The URL of a webhook endpoint to send the extracted
-                      information
-                    </FormDescription>
-                    <FormControl>
-                      <Input
-                        placeholder="example.com"
-                        {...field}
-                        value={field.value === null ? "" : field.value}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="maxSteps"
-                render={({ field }) => {
-                  return (
+        <TaskFormSection
+          index={1}
+          title="Base Content"
+          active={section === "base"}
+          onClick={() => setSection("base")}
+          hasError={
+            typeof errors.navigationGoal !== "undefined" ||
+            typeof errors.title !== "undefined" ||
+            typeof errors.url !== "undefined" ||
+            typeof errors.description !== "undefined"
+          }
+        >
+          {section === "base" && (
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Max Steps</FormLabel>
-                      <FormDescription>
-                        Max steps for this task. This will override your
-                        organization wide setting.
-                      </FormDescription>
-                      <FormControl>
-                        {organizationIsPending ? (
-                          <Skeleton className="h-8" />
-                        ) : (
-                          <Input
-                            {...field}
-                            type="number"
-                            min={1}
-                            max={
-                              organization?.max_steps_per_run ??
-                              MAX_STEPS_DEFAULT
-                            }
-                            value={field.value ?? MAX_STEPS_DEFAULT}
-                            onChange={(event) => {
-                              field.onChange(parseInt(event.target.value));
-                            }}
-                          />
-                        )}
-                      </FormControl>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Title</h1>
+                            <h2 className="text-base text-slate-400">
+                              Name of your task
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input placeholder="Task Name" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
                     </FormItem>
-                  );
-                }}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Description</h1>
+                            <h2 className="text-base text-slate-400">
+                              What is the purpose of the task?
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <AutoResizingTextarea
+                              placeholder="This template is used to..."
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <Separator />
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">URL</h1>
+                            <h2 className="text-base text-slate-400">
+                              The starting URL for the task
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input placeholder="https://" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="navigationGoal"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Navigation Goal</h1>
+                            <h2 className="text-base text-slate-400">
+                              Where should Skyvern go and what should Skyvern
+                              do?
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <AutoResizingTextarea
+                              placeholder="Use terms like complete or terminate to give completion directions"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          )}
+        </TaskFormSection>
+        <TaskFormSection
+          index={2}
+          title="Extraction"
+          active={section === "extraction"}
+          onClick={() => setSection("extraction")}
+          hasError={
+            typeof errors.extractedInformationSchema !== "undefined" ||
+            typeof errors.dataExtractionGoal !== "undefined"
+          }
+        >
+          {section === "extraction" && (
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="dataExtractionGoal"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Data Extraction Goal</h1>
+                            <h2 className="text-base text-slate-400">
+                              What outputs are you looking to get?
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <AutoResizingTextarea
+                              placeholder="e.g. Extract the product price..."
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="extractedInformationSchema"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Data Schema</h1>
+                            <h2 className="text-base text-slate-400">
+                              Specify the output format in JSON
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <CodeEditor
+                              {...field}
+                              language="json"
+                              fontSize={14}
+                              minHeight="96px"
+                              value={
+                                field.value === null ||
+                                typeof field.value === "undefined"
+                                  ? ""
+                                  : field.value
+                              }
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          )}
+        </TaskFormSection>
+        <TaskFormSection
+          index={3}
+          title="Advanced Settings"
+          active={section === "advanced"}
+          onClick={() => setSection("advanced")}
+          hasError={
+            typeof errors.navigationPayload !== "undefined" ||
+            typeof errors.maxSteps !== "undefined" ||
+            typeof errors.webhookCallbackUrl !== "undefined"
+          }
+        >
+          {section === "advanced" && (
+            <div className="space-y-6">
+              <div className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="navigationPayload"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Navigation Payload</h1>
+                            <h2 className="text-base text-slate-400">
+                              Specify important parameters, routes, or states
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <CodeEditor
+                              {...field}
+                              language="json"
+                              fontSize={12}
+                              minHeight="96px"
+                              value={
+                                field.value === null ||
+                                typeof field.value === "undefined"
+                                  ? ""
+                                  : field.value
+                              }
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="maxSteps"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Max Steps Override</h1>
+                            <h2 className="text-base text-slate-400">
+                              Want to allow this task to execute more or less
+                              steps than the default?
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              {...field}
+                              type="number"
+                              min={1}
+                              value={field.value}
+                              onChange={(event) => {
+                                field.onChange(parseInt(event.target.value));
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="webhookCallbackUrl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Webhook Callback URL</h1>
+                            <h2 className="text-base text-slate-400">
+                              The URL of a webhook endpoint to send the
+                              extracted information
+                            </h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              placeholder="https://"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="totpVerificationUrl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">TOTP Verification URL</h1>
+                            <h2 className="text-base text-slate-400"></h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              placeholder="https://"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="totpIdentifier"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">TOTP Identifier</h1>
+                            <h2 className="text-base text-slate-400"></h2>
+                          </div>
+                        </FormLabel>
+                        <div className="w-full">
+                          <FormControl>
+                            <Input
+                              placeholder="Idenfitifer"
+                              {...field}
+                              value={field.value === null ? "" : field.value}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </div>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+          )}
+        </TaskFormSection>
 
         <div className="flex justify-end gap-3">
           <Button
diff --git a/skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx b/skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx
new file mode 100644
index 00000000..4f391bd8
--- /dev/null
+++ b/skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx
@@ -0,0 +1,65 @@
+import { cn } from "@/util/utils";
+import { useState } from "react";
+
+type Props = {
+  index: number;
+  title: string;
+  active: boolean;
+  hasError?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+};
+
+function TaskFormSection({
+  index,
+  title,
+  active,
+  onClick,
+  children,
+  hasError,
+}: Props) {
+  const [hovering, setHovering] = useState(false);
+
+  return (
+    <section
+      className={cn("space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5", {
+        "cursor-pointer": !active,
+      })}
+      onMouseOver={() => setHovering(true)}
+      onMouseOut={() => setHovering(false)}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+      onClick={() => onClick && onClick()}
+    >
+      <header className="flex h-7 gap-4">
+        <div
+          className={cn(
+            "flex w-7 items-center justify-center rounded-full border border-slate-400",
+            {
+              "bg-slate-400": hovering || active,
+              "border-destructive": !active && hasError,
+            },
+          )}
+        >
+          <span
+            className={cn("text-slate-50", {
+              "text-slate-950": hovering || active,
+            })}
+          >
+            {String(index)}
+          </span>
+        </div>
+        <span
+          className={cn("text-lg", {
+            "text-destructive": !active && hasError,
+          })}
+        >
+          {title}
+        </span>
+      </header>
+      {children}
+    </section>
+  );
+}
+
+export { TaskFormSection };
diff --git a/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx b/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx
index 26c01310..0d1f7350 100644
--- a/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx
@@ -33,6 +33,8 @@ function RetryTask() {
                 2,
               ),
         webhookCallbackUrl: task.request.webhook_callback_url,
+        totpIdentifier: task.request.totp_identifier,
+        totpVerificationUrl: task.request.totp_verification_url,
       }}
     />
   );