diff --git a/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx b/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
index 8b65daf75..65b2e6e93 100644
--- a/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
+++ b/apps/embedded-catalog/react/src/components/PanoraDynamicCatalog.tsx
@@ -21,16 +21,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
 import useCreateApiKeyConnection from '@/hooks/queries/useCreateApiKeyConnection';
 import { LoadingSpinner } from './ui/loading-spinner';
+import { Label } from './ui/label';
 
 
 export interface DynamicCardProp {
@@ -39,13 +32,17 @@ export interface DynamicCardProp {
   category?: ConnectorCategory;
   optionalApiUrl?: string,
 }
+interface IApiKeyFormData {
+  apikey: string,
+  [key : string]: string
+}
 
 
-const formSchema = z.object({
-  apiKey: z.string().min(2, {
-    message: "Api Key must be at least 2 characters.",
-  })
-})
+// const formSchema = z.object({
+//   apiKey: z.string().min(2, {
+//     message: "Api Key must be at least 2 characters.",
+//   })
+// })
 
 const DynamicCatalog = ({projectId,linkedUserId, category, optionalApiUrl} : DynamicCardProp) => {
 
@@ -54,7 +51,10 @@ const DynamicCatalog = ({projectId,linkedUserId, category, optionalApiUrl} : Dyn
   const [selectedProvider, setSelectedProvider] = useState<{
     provider: string;
     category: string;
-  }>();  
+  }>({
+    provider: '',
+    category: ''
+  });  
   
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -73,12 +73,14 @@ const DynamicCatalog = ({projectId,linkedUserId, category, optionalApiUrl} : Dyn
   const {mutate : createApiKeyConnection} = useCreateApiKeyConnection();
 
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      apiKey: "",
-    },
-  })
+  // const form = useForm<z.infer<typeof formSchema>>({
+  //   resolver: zodResolver(formSchema),
+  //   defaultValues: {
+  //     apiKey: "",
+  //   },
+  // })
+  const {register,formState: {errors},handleSubmit,reset} = useForm<IApiKeyFormData>();
+
   
   const [data, setData] = useState<Provider[]>([]);
 
@@ -173,9 +175,14 @@ const DynamicCatalog = ({projectId,linkedUserId, category, optionalApiUrl} : Dyn
     });
   }
 
-  const onApiKeySubmit = (values: z.infer<typeof formSchema>) => {
+  const onCloseApiKeyDialog = (dialogState : boolean) => {
+    setOpenApiKeyDialog(dialogState);
+    reset();
+  }
+
+  const onApiKeySubmit = (values: IApiKeyFormData) => {
     setErrorResponse({errorPresent:false,errorMessage:''});
-    setOpenApiKeyDialog(false);
+    onCloseApiKeyDialog(false);
     setLoading(true);
 
     // Creating API Key Connection
@@ -186,9 +193,7 @@ const DynamicCatalog = ({projectId,linkedUserId, category, optionalApiUrl} : Dyn
         providerName: selectedProvider?.provider!,
         vertical: selectedProvider?.category!
       },
-      data: {
-        apikey: values.apiKey
-      },  
+      data: values,  
       api_url: optionalApiUrl ?? config.API_URL!
     },
     {
@@ -257,41 +262,61 @@ const DynamicCatalog = ({projectId,linkedUserId, category, optionalApiUrl} : Dyn
         }
 
         {/* Dialog for apikey input */}
-        <Dialog open={openApiKeyDialog} onOpenChange={setOpenApiKeyDialog}>
+        <Dialog open={openApiKeyDialog} onOpenChange={onCloseApiKeyDialog}>
           <DialogContent>
           <DialogHeader>
             <DialogTitle>Enter a API key</DialogTitle>
           </DialogHeader>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onApiKeySubmit)}>
+          {/* <Form {...form}> */}
+            <form onSubmit={handleSubmit(onApiKeySubmit)}>
             <div className="grid gap-4 py-4">
               <div className="grid gap-2">
-              <FormField
-                    control={form.control}
-                    name="apiKey"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Enter your API key for {selectedProvider?.provider}</FormLabel>
-                        <FormControl>
-                          <Input 
-                          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
-                          placeholder="Your awesome key name" {...field}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                />
+                <Label className={errors.apikey ? 'text-destructive' : ''}>Enter your API key for {selectedProvider?.provider}</Label>
+                <Input 
+                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
+                        placeholder="Your api key"
+                        {...register('apikey',{
+                          required: 'Api Key must be at least 2 characters',
+                          minLength: {
+                            value:2,
+                            message: 'Api Key must be at least 2 characters'
+                          }
+                        
+                        })}
+                  />
+                  <div>{errors.apikey && (<p className='text-sm font-medium text-destructive'>{errors.apikey.message}</p>)}</div>
+                  
+
+                {/* </div> */}
+                {selectedProvider.provider!=='' && selectedProvider.category!=='' && CONNECTORS_METADATA[selectedProvider.category][selectedProvider.provider].authStrategy.properties?.map((fieldName : string) => 
+                (
+                  <>
+                  <Label className={errors[fieldName] ? 'text-destructive' : ''}>Enter your {fieldName} for {selectedProvider?.provider}</Label>
+                  <Input
+                        type='text'
+                        placeholder={`Your ${fieldName}`}
+                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
+                        {...register(fieldName,{
+                          required: `${fieldName} must be at least 2 characters`,
+                          minLength:{
+                            value:2,
+                            message: `${fieldName} must be at least 2 characters`,
+                          }
+                        })}
+                  />
+                  {errors[fieldName] && (<p className='text-sm font-medium text-destructive'>{errors[fieldName]?.message}</p>)}
+                  </>
+                ))}
               </div>
             </div>
           <DialogFooter>
-            <Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => setOpenApiKeyDialog(false)}>Cancel</Button>
+            <Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => onCloseApiKeyDialog(false)}>Cancel</Button>
             <Button type='submit' size="sm" className="h-7 gap-1">
               Continue
             </Button>
           </DialogFooter>
             </form>
-          </Form>
+          {/* </Form> */}
           </DialogContent>
         </Dialog>
 
diff --git a/apps/embedded-catalog/react/src/components/PanoraIntegrationCard.tsx b/apps/embedded-catalog/react/src/components/PanoraIntegrationCard.tsx
index 087bfa28a..ad00f22bd 100644
--- a/apps/embedded-catalog/react/src/components/PanoraIntegrationCard.tsx
+++ b/apps/embedded-catalog/react/src/components/PanoraIntegrationCard.tsx
@@ -20,16 +20,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
 import useCreateApiKeyConnection from '@/hooks/queries/useCreateApiKeyConnection';
 import { LoadingSpinner } from './ui/loading-spinner';
+import { Label } from './ui/label';
 
 
 export interface ProviderCardProp {
@@ -40,11 +33,16 @@ export interface ProviderCardProp {
   optionalApiUrl?: string,
 }
 
-const formSchema = z.object({
-  apiKey: z.string().min(2, {
-    message: "Api Key must be at least 2 characters.",
-  })
-})
+// const formSchema = z.object({
+//   apiKey: z.string().min(2, {
+//     message: "Api Key must be at least 2 characters.",
+//   })
+// })
+
+interface IApiKeyFormData {
+  apikey: string,
+  [key : string]: string
+}
 
 const PanoraIntegrationCard = ({name, category, projectId, linkedUserId, optionalApiUrl}: ProviderCardProp) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -61,12 +59,14 @@ const PanoraIntegrationCard = ({name, category, projectId, linkedUserId, optiona
     ? window.location.href 
     : '';
 
-    const form = useForm<z.infer<typeof formSchema>>({
-      resolver: zodResolver(formSchema),
-      defaultValues: {
-        apiKey: "",
-      },
-    })
+    // const form = useForm<z.infer<typeof formSchema>>({
+    //   resolver: zodResolver(formSchema),
+    //   defaultValues: {
+    //     apiKey: "",
+    //   },
+    // })
+  const {register,formState: {errors},handleSubmit,reset} = useForm<IApiKeyFormData>();
+
 
 
     const { open, isReady } = useOAuth({
@@ -119,9 +119,14 @@ const PanoraIntegrationCard = ({name, category, projectId, linkedUserId, optiona
       
     }
 
-    const onApiKeySubmit = (values: z.infer<typeof formSchema>) => {
+    const onCloseApiKeyDialog = (dialogState : boolean) => {
+      setOpenApiKeyDialog(dialogState);
+      reset();
+    }
+
+    const onApiKeySubmit = (values: IApiKeyFormData) => {
       setErrorResponse({errorPresent:false,errorMessage:''});
-      setOpenApiKeyDialog(false);
+      onCloseApiKeyDialog(false);
       setLoading(true);
   
       // Creating API Key Connection
@@ -132,9 +137,7 @@ const PanoraIntegrationCard = ({name, category, projectId, linkedUserId, optiona
           providerName: name.toLowerCase(),
           vertical: category.toLowerCase()
         },
-        data: {
-          apikey: values.apiKey
-        },
+        data: values,
         api_url: optionalApiUrl ?? config.API_URL!
       },
       {
@@ -150,7 +153,6 @@ const PanoraIntegrationCard = ({name, category, projectId, linkedUserId, optiona
     }
 
     const CONNECTOR = CONNECTORS_METADATA[category!.toLowerCase()][name.toLowerCase()]
-  
     const img = CONNECTOR.logoPath;
       
 
@@ -184,11 +186,7 @@ const PanoraIntegrationCard = ({name, category, projectId, linkedUserId, optiona
                     )}
                     
                   </div>
-                  
-
                   {errorResponse.errorPresent ? <p className='mt-2 text-xs text-red-700'>{errorResponse.errorMessage}</p> : (<></>)}
-
-            
                 </div>
                 <div>
                 </div>
@@ -196,41 +194,61 @@ const PanoraIntegrationCard = ({name, category, projectId, linkedUserId, optiona
             </Card>
 
             {/* Dialog for apikey input */}
-            <Dialog open={openApiKeyDialog} onOpenChange={setOpenApiKeyDialog}>
+            <Dialog open={openApiKeyDialog} onOpenChange={onCloseApiKeyDialog}>
               <DialogContent>
               <DialogHeader>
                 <DialogTitle>Enter a API key</DialogTitle>
               </DialogHeader>
-              <Form {...form}>
-                <form onSubmit={form.handleSubmit(onApiKeySubmit)}>
+              {/* <Form {...form}> */}
+                <form onSubmit={handleSubmit(onApiKeySubmit)}>
                 <div className="grid gap-4 py-4">
                   <div className="grid gap-2">
-                  <FormField
-                        control={form.control}
-                        name="apiKey"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>Enter your API key for {name}</FormLabel>
-                            <FormControl>
-                              <Input 
-                              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
-                              placeholder="Your awesome key name" {...field}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
+                  <Label className={errors.apikey ? 'text-destructive' : ''}>Enter your API key for {name}</Label>
+                  <Input 
+                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
+                            placeholder="Your api key"
+                            {...register('apikey',{
+                              required: 'Api Key must be at least 2 characters',
+                              minLength: {
+                                value:2,
+                                message: 'Api Key must be at least 2 characters'
+                              }
+                            
+                            })}
+                    />
+                    <div>{errors.apikey && (<p className='text-sm font-medium text-destructive'>{errors.apikey.message}</p>)}</div>
+                    
+
+                  {/* </div> */}
+                  {CONNECTORS_METADATA[category.toLowerCase()][name.toLowerCase()].authStrategy.properties?.map((fieldName :string) => 
+                  (
+                    <>
+                    <Label className={errors[fieldName] ? 'text-destructive' : ''}>Enter your {fieldName} for {name}</Label>
+                    <Input
+                          type='text'
+                          placeholder={`Your ${fieldName}`}
+                          className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
+                          {...register(fieldName,{
+                            required: `${fieldName} must be at least 2 characters`,
+                            minLength:{
+                              value:2,
+                              message: `${fieldName} must be at least 2 characters`,
+                            }
+                          })}
                     />
+                    {errors[fieldName] && (<p className='text-sm font-medium text-destructive'>{errors[fieldName]?.message}</p>)}
+                    </>
+                  ))}
                   </div>
                 </div>
               <DialogFooter>
-                <Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => setOpenApiKeyDialog(false)}>Cancel</Button>
+                <Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => onCloseApiKeyDialog(false)}>Cancel</Button>
                 <Button type='submit' size="sm" className="h-7 gap-1">
                   Continue
                 </Button>
               </DialogFooter>
                 </form>
-              </Form>
+              {/* </Form> */}
               </DialogContent>
             </Dialog>
 
diff --git a/apps/embedded-catalog/react/src/hooks/queries/useCreateApiKeyConnection.tsx b/apps/embedded-catalog/react/src/hooks/queries/useCreateApiKeyConnection.tsx
index 038105ee1..f95d26b73 100644
--- a/apps/embedded-catalog/react/src/hooks/queries/useCreateApiKeyConnection.tsx
+++ b/apps/embedded-catalog/react/src/hooks/queries/useCreateApiKeyConnection.tsx
@@ -10,7 +10,7 @@ interface IApiKeyConnectionDto {
   },
   data: {
     apikey: string,
-    username?: string
+    [key : string]: string
   },
   api_url: string
 }
diff --git a/apps/magic-link/src/hooks/queries/useCreateApiKeyConnection.tsx b/apps/magic-link/src/hooks/queries/useCreateApiKeyConnection.tsx
index 2e100a8f3..d8282f6da 100644
--- a/apps/magic-link/src/hooks/queries/useCreateApiKeyConnection.tsx
+++ b/apps/magic-link/src/hooks/queries/useCreateApiKeyConnection.tsx
@@ -10,7 +10,7 @@ interface IApiKeyConnectionDto {
   },
   data: {
     apikey: string,
-    username?: string
+    [key : string]: string
   }
 }
 
diff --git a/apps/magic-link/src/lib/ProviderModal.tsx b/apps/magic-link/src/lib/ProviderModal.tsx
index 4ab697614..7ac0a580e 100644
--- a/apps/magic-link/src/lib/ProviderModal.tsx
+++ b/apps/magic-link/src/lib/ProviderModal.tsx
@@ -25,29 +25,26 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
 import useCreateApiKeyConnection from '@/hooks/queries/useCreateApiKeyConnection';
 
 
-const formSchema = z.object({
-  apiKey: z.string().min(2, {
-    message: "Api Key must be at least 2 characters.",
-  })
-})
+// const formSchema = z.object({
+//   apiKey: z.string().min(2, {
+//     message: "Api Key must be at least 2 characters.",
+//   })
+// });
+
+interface IApiKeyFormData {
+  apikey: string,
+  [key : string]: string
+}
 
 const ProviderModal = () => {
   const [selectedCategory, setSelectedCategory] = useState("All");
   const [selectedProvider, setSelectedProvider] = useState<{
     provider: string;
     category: string;
-  }>();
+  }>({provider:'',category:''});
   const [startFlow, setStartFlow] = useState<boolean>(false);
   const [preStartFlow, setPreStartFlow] = useState<boolean>(false);
   const [openApiKeyDialog,setOpenApiKeyDialog] = useState<boolean>(false);
@@ -70,12 +67,15 @@ const ProviderModal = () => {
   const {data: magicLink} = useUniqueMagicLink(uniqueMagicLinkId); 
   const {data: connectorsForProject} = useProjectConnectors(projectId);
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      apiKey: "",
-    },
-  })
+  // const form = useForm<z.infer<typeof formSchema>>({
+  //   resolver: zodResolver(formSchema),
+
+  //   defaultValues: {
+  //     apiKey: "",
+  //   },
+  // })
+
+  const {register,formState: {errors},handleSubmit,reset} = useForm<IApiKeyFormData>();
 
   useEffect(() => { 
     const queryParams = new URLSearchParams(window.location.search);
@@ -173,7 +173,7 @@ const ProviderModal = () => {
   };
 
   const handleStartFlow = () => {
-    if(selectedProvider && CONNECTORS_METADATA[selectedProvider.category][selectedProvider.provider].authStrategy.strategy===AuthStrategy.api_key)
+    if(selectedProvider.provider!=='' && selectedProvider.category!=='' && CONNECTORS_METADATA[selectedProvider.category][selectedProvider.provider].authStrategy.strategy===AuthStrategy.api_key)
       {
         setOpenApiKeyDialog(true)
       }
@@ -218,9 +218,16 @@ const ProviderModal = () => {
     });
   }
 
-  const onApiKeySubmit = (values: z.infer<typeof formSchema>) => {
-    setOpenApiKeyDialog(false);
+  const onCloseApiKeyDialog = (dialogState : boolean) => {
+    setOpenApiKeyDialog(dialogState);
+    reset();
+  }
+
+  const onApiKeySubmit = (values: IApiKeyFormData) => {
+    // const extraFields = getValues()
+    onCloseApiKeyDialog(false);
     setLoading({status: true, provider: selectedProvider?.provider!});
+    setPreStartFlow(false);
 
     // Creating API Key Connection
     createApiKeyConnection({
@@ -230,9 +237,7 @@ const ProviderModal = () => {
         providerName: selectedProvider?.provider!,
         vertical: selectedProvider?.category!
       },
-      data: {
-        apikey: values.apiKey
-      },  
+      data: values  
     },
     {
       onSuccess: () => {
@@ -258,7 +263,7 @@ const ProviderModal = () => {
           category: ''
         });  
       }
-    })
+    });
   }
 
 
@@ -321,41 +326,61 @@ const ProviderModal = () => {
     </Card>
 
     {/* Dialog for apikey input */}
-    <Dialog open={openApiKeyDialog} onOpenChange={setOpenApiKeyDialog}>
+    <Dialog open={openApiKeyDialog} onOpenChange={onCloseApiKeyDialog}>
       <DialogContent>
       <DialogHeader>
         <DialogTitle>Enter a API key</DialogTitle>
       </DialogHeader>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onApiKeySubmit)}>
+      {/* <Form {...form}> */}
+        <form onSubmit={handleSubmit(onApiKeySubmit)}>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
-          <FormField
-                control={form.control}
-                name="apiKey"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Enter your API key for {selectedProvider?.provider}</FormLabel>
-                    <FormControl>
-                      <Input 
+              <Label className={errors.apikey ? 'text-destructive' : ''}>Enter your API key for {selectedProvider?.provider}</Label>
+              <Input 
                       className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
-                      placeholder="Your awesome key name" {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-            />
+                      placeholder="Your api key"
+                      {...register('apikey',{
+                        required: 'Api Key must be at least 2 characters',
+                        minLength: {
+                          value:2,
+                          message: 'Api Key must be at least 2 characters'
+                        }
+                      
+                      })}
+              />
+              <div>{errors.apikey && (<p className='text-sm font-medium text-destructive'>{errors.apikey.message}</p>)}</div>
+              
+
+            {/* </div> */}
+            {selectedProvider.provider!=='' && selectedProvider.category!=='' && CONNECTORS_METADATA[selectedProvider.category][selectedProvider.provider].authStrategy.properties?.map((fieldName : string) => 
+            (
+              <>
+              <Label className={errors[fieldName] ? 'text-destructive' : ''}>Enter your {fieldName} for {selectedProvider?.provider}</Label>
+              <Input
+                    type='text'
+                    placeholder={`Your ${fieldName}`}
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
+                    {...register(fieldName,{
+                      required: `${fieldName} must be at least 2 characters`,
+                      minLength:{
+                        value:2,
+                        message: `${fieldName} must be at least 2 characters`,
+                      }
+                    })}
+              />
+              {errors[fieldName] && (<p className='text-sm font-medium text-destructive'>{errors[fieldName]?.message}</p>)}
+              </>
+            ))}
           </div>
         </div>
       <DialogFooter>
-        <Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => setOpenApiKeyDialog(false)}>Cancel</Button>
+        <Button variant='outline' type="reset" size="sm" className="h-7 gap-1" onClick={() => onCloseApiKeyDialog(false)}>Cancel</Button>
         <Button type='submit' size="sm" className="h-7 gap-1">
           Continue
         </Button>
       </DialogFooter>
         </form>
-      </Form>
+      {/* </Form> */}
       </DialogContent>
     </Dialog>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 245d189c0..e151cced4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -308,6 +308,9 @@ importers:
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-icons':
+        specifier: ^1.3.0
+        version: 1.3.0(react@18.2.0)
       '@radix-ui/react-label':
         specifier: ^2.0.2
         version: 2.0.2(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)