diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index 0195f3879..8120fad6b 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -11,6 +11,7 @@ import PureSelect from '@/app/components/base/select/pure'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
+import RadioE from '@/app/components/base/radio/ui'
 
 export type BaseFieldProps = {
   fieldClassName?: string
@@ -57,8 +58,27 @@ const BaseField = ({
     if (typeof placeholder === 'object' && placeholder !== null)
       return renderI18nObject(placeholder as Record<string, string>)
   }, [placeholder, renderI18nObject])
+  const optionValues = useStore(field.form.store, (s) => {
+    const result: Record<string, any> = {}
+    options?.forEach((option) => {
+      if (option.show_on?.length) {
+        option.show_on.forEach((condition) => {
+          result[condition.variable] = s.values[condition.variable]
+        })
+      }
+    })
+    return result
+  })
   const memorizedOptions = useMemo(() => {
-    return options?.map((option) => {
+    return options?.filter((option) => {
+      if (!option.show_on?.length)
+        return true
+
+      return option.show_on.every((condition) => {
+        const conditionValue = optionValues[condition.variable]
+        return conditionValue === condition.value
+      })
+    }).map((option) => {
       return {
         label: typeof option.label === 'string' ? option.label : renderI18nObject(option.label),
         value: option.value,
@@ -151,17 +171,28 @@ const BaseField = ({
         }
         {
           formSchema.type === FormTypeEnum.radio && (
-            <div className='flex items-center space-x-2'>
+            <div className={cn(
+              memorizedOptions.length < 3 ? 'flex items-center space-x-2' : 'space-y-2',
+            )}>
               {
                 memorizedOptions.map(option => (
                   <div
                     key={option.value}
                     className={cn(
-                      'system-sm-regular hover:bg-components-option-card-option-hover-bg hover:border-components-option-card-option-hover-border flex h-8 grow cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary',
+                      'system-sm-regular hover:bg-components-option-card-option-hover-bg hover:border-components-option-card-option-hover-border flex h-8 flex-[1] grow cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary',
                       value === option.value && 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs',
+                      inputClassName,
                     )}
                     onClick={() => field.handleChange(option.value)}
                   >
+                    {
+                      formSchema.showRadioUI && (
+                        <RadioE
+                          className='mr-2'
+                          isChecked={value === option.value}
+                        />
+                      )
+                    }
                     {option.label}
                   </div>
                 ))
diff --git a/web/app/components/base/form/components/base/base-form.tsx b/web/app/components/base/form/components/base/base-form.tsx
index 640d474b1..c056829db 100644
--- a/web/app/components/base/form/components/base/base-form.tsx
+++ b/web/app/components/base/form/components/base/base-form.tsx
@@ -2,6 +2,7 @@ import {
   memo,
   useCallback,
   useImperativeHandle,
+  useMemo,
 } from 'react'
 import type {
   AnyFieldApi,
@@ -45,8 +46,18 @@ const BaseForm = ({
   disabled,
   formFromProps,
 }: BaseFormProps) => {
+  const initialDefaultValues = useMemo(() => {
+    if (defaultValues)
+      return defaultValues
+
+    return formSchemas.reduce((acc, schema) => {
+      if (schema.default)
+        acc[schema.name] = schema.default
+      return acc
+    }, {} as Record<string, any>)
+  }, [defaultValues])
   const formFromHook = useForm({
-    defaultValues,
+    defaultValues: initialDefaultValues,
   })
   const form: any = formFromProps || formFromHook
   const { getFormValues } = useGetFormValues(form, formSchemas)
diff --git a/web/app/components/base/form/form-scenarios/auth/index.tsx b/web/app/components/base/form/form-scenarios/auth/index.tsx
index 3927f9095..f499e43f1 100644
--- a/web/app/components/base/form/form-scenarios/auth/index.tsx
+++ b/web/app/components/base/form/form-scenarios/auth/index.tsx
@@ -7,6 +7,7 @@ const AuthForm = ({
   defaultValues,
   ref,
   formFromProps,
+  ...rest
 }: BaseFormProps) => {
   return (
     <BaseForm
@@ -16,6 +17,7 @@ const AuthForm = ({
       formClassName='space-y-4'
       labelClassName='h-6 flex items-center mb-1 system-sm-medium text-text-secondary'
       formFromProps={formFromProps}
+      {...rest}
     />
   )
 }
diff --git a/web/app/components/base/form/types.ts b/web/app/components/base/form/types.ts
index c165d2939..9b3beeee7 100644
--- a/web/app/components/base/form/types.ts
+++ b/web/app/components/base/form/types.ts
@@ -58,6 +58,7 @@ export type FormSchema = {
   options?: FormOption[]
   labelClassName?: string
   validators?: AnyValidators
+  showRadioUI?: boolean
 }
 
 export type FormValues = Record<string, any>
diff --git a/web/app/components/base/radio/ui.tsx b/web/app/components/base/radio/ui.tsx
index 178262d0b..ea132c7d4 100644
--- a/web/app/components/base/radio/ui.tsx
+++ b/web/app/components/base/radio/ui.tsx
@@ -5,13 +5,21 @@ import cn from '@/utils/classnames'
 
 type Props = {
   isChecked: boolean
+  className?: string
 }
 
 const RadioUI: FC<Props> = ({
   isChecked,
+  className,
 }) => {
   return (
-    <div className={cn(isChecked ? 'border-[5px] border-components-radio-border-checked' : 'border-[2px] border-components-radio-border', 'h-4 w-4  rounded-full')}>
+    <div
+      className={cn(
+        isChecked ? 'border-[5px] border-components-radio-border-checked' : 'border-[2px] border-components-radio-border',
+        'h-4 w-4  rounded-full',
+        className,
+      )}
+    >
     </div>
   )
 }