diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/WfRunForm.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/WfRunForm.tsx
index b4663c7311..7890919c40 100644
--- a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/WfRunForm.tsx
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/WfRunForm.tsx
@@ -14,33 +14,39 @@ type Prop = {
   onSubmit: (data: FormValues) => void
 }
 
-// eslint-disable-next-line react/display-name
 export const WfRunForm = forwardRef<HTMLFormElement, Prop>(({ wfSpecVariables, onSubmit }, ref) => {
   const methods = useForm()
   const { register, handleSubmit, formState } = methods
 
-  const onSubmitForm = (data: FormValues) => {
-    onSubmit(data)
-  }
-
   return (
     <FormProvider {...methods}>
-      <form onSubmit={handleSubmit(onSubmitForm)} ref={ref}>
+      <form onSubmit={methods.handleSubmit(onSubmit)} ref={ref} className="space-y-4">
         <div>
-          <Label htmlFor="custom-id">Custom WfRun Id</Label>
+          <div className="mb-2 flex justify-between">
+            <Label htmlFor="customWfRunId" className="center flex items-center gap-2">
+              Custom WfRun Id
+              <span className="rounded bg-gray-300 p-1 text-xs">Optional</span>
+            </Label>
+          </div>
           <Input
+            {...methods.register('customWfRunId')}
             type="text"
-            className="mb-4 mt-1"
-            id="custom-id"
-            {...register('custom-id-wfRun-flow')}
-            placeholder="Enter string value"
+            placeholder="Enter custom WfRun Id"
           />
         </div>
+
         {!!wfSpecVariables?.length &&
           wfSpecVariables.map((variable: ThreadVarDef) => (
-            <FormFields key={variable.varDef?.name} variables={variable} register={register} formState={formState} />
+            <FormFields
+              key={variable.varDef?.name}
+              variable={variable}
+              register={methods.register}
+              formState={methods.formState}
+            />
           ))}
       </form>
     </FormProvider>
   )
 })
+
+WfRunForm.displayName = 'WfRunForm'
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/BaseFormField.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/BaseFormField.tsx
new file mode 100644
index 0000000000..86d28b36a2
--- /dev/null
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/BaseFormField.tsx
@@ -0,0 +1,61 @@
+import { getVariableValue } from '@/app/utils'
+import { Label } from '@/components/ui/label'
+import { FormFieldProp } from '@/types'
+import { WfRunVariableAccessLevel } from 'littlehorse-client/proto'
+import { CircleAlert } from 'lucide-react'
+import { useFormContext } from 'react-hook-form'
+
+export const accessLevels: { [key in WfRunVariableAccessLevel]: string } = {
+  PUBLIC_VAR: 'Public',
+  INHERITED_VAR: 'Inherited',
+  PRIVATE_VAR: 'Private',
+  UNRECOGNIZED: '',
+}
+
+type FormFieldWrapperProps = {
+  variables: FormFieldProp['variable']
+  children: React.ReactNode
+}
+
+export const BaseFormField = ({ variables, children }: FormFieldWrapperProps) => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+
+  if (!variables?.varDef?.name) return null
+
+  const {
+    varDef: { name, defaultValue },
+    required,
+    accessLevel,
+  } = variables
+
+  const hasDefaultValue = !!defaultValue
+
+  return (
+    <div>
+      <div className="mb-2 flex justify-between">
+        <Label htmlFor={name} className="center flex items-center gap-2">
+          {name}
+          <span className="rounded bg-green-300 p-1 text-xs">{accessLevels[accessLevel]}</span>
+          {required ? (
+            <span className="rounded bg-red-300 p-1 text-xs">Required</span>
+          ) : (
+            <span className="rounded bg-gray-300 p-1 text-xs">Optional</span>
+          )}
+          {hasDefaultValue && (
+            <span className="rounded bg-blue-300 p-1 text-xs">Default: {getVariableValue(defaultValue)?.toString()}</span>
+          )}
+        </Label>
+      </div>
+
+      <div className="w-full">{children}</div>
+      {errors[name] && (
+        <p className="mt-2 flex items-center gap-1 text-sm text-destructive">
+          <CircleAlert size={16} />
+          {errors[name]?.message?.toString()}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormFields.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormFields.tsx
index 75aa5d072c..9d492fc8fe 100644
--- a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormFields.tsx
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormFields.tsx
@@ -1,16 +1,10 @@
-import React, { FC } from 'react'
+import { FormFieldProp } from '@/types'
+import { FC } from 'react'
 import { FormComponent } from './formType'
-import { VariableType, ThreadVarDef } from 'littlehorse-client/proto'
-import { FieldValues, UseFormRegister, FormState } from 'react-hook-form'
 
-type Prop = {
-  variables: ThreadVarDef
-  register: UseFormRegister<FieldValues>
-  formState: FormState<FieldValues>
-}
-export const FormFields: FC<Prop> = props => {
-  const type = props.variables?.varDef?.type as VariableType
-  if (!type) return
-  const Component = FormComponent[type]
-  return <Component {...props} />
+export const FormFields: FC<FormFieldProp> = ({ variable: variables, register, formState }) => {
+  if (!variables?.varDef?.type) return null
+
+  const Component = FormComponent[variables.varDef.type]
+  return <Component variable={variables} register={register} formState={formState} />
 }
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormInput.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormInput.tsx
index e2ba9a1783..ae5b3c445a 100644
--- a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormInput.tsx
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormInput.tsx
@@ -1,77 +1,43 @@
 import { VARIABLE_TYPES } from '@/app/constants'
 import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 import { FormFieldProp } from '@/types'
 import { VariableType } from 'littlehorse-client/proto'
-import { CircleAlert } from 'lucide-react'
-import { FC, useState } from 'react'
-import { accessLevels } from '../../../wfSpec/[...props]/components/Variables'
+import { FC } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { BaseFormField } from './BaseFormField'
 
 export const FormInput: FC<FormFieldProp> = props => {
-  const [isDisabled, setIsDisabled] = useState(false)
-  if (!props.variables?.varDef?.name) return null
+  const { register } = useFormContext()
+
+  if (!props.variable?.varDef?.name) return null
 
   const {
-    variables: {
+    variable: {
       varDef: { type, name },
       required,
-      accessLevel,
     },
-    register,
-    formState: { errors },
   } = props
 
-  const variableToType = (variable: VariableType) => {
-    switch (variable) {
-      case VariableType.INT:
-        return 'number'
-      case VariableType.DOUBLE:
-        return 'number'
-      case VariableType.BYTES:
-        return 'number'
-      case VariableType.STR:
-        return 'text'
-      default:
-        return 'text'
-    }
-  }
-
-  const setValue = (value: number | string) => {
-    if (value === null) return value
-    return variableToType(type) === 'number' ? parseFloat(value?.toString()) || undefined : value || undefined
-  }
-
   return (
-    <div>
-      <div className="mb-2 flex justify-between">
-        <Label htmlFor={name} className="flex items-center gap-2">
-          {name}
-          <span className="rounded bg-green-300 p-1 text-xs">{accessLevels[accessLevel]}</span>
-          {required ? (
-            <span className="rounded bg-red-300 p-1 text-xs">Required</span>
-          ) : (
-            <span className="rounded bg-gray-300 p-1 text-xs">Optional</span>
-          )}
-        </Label>
-      </div>
+    <BaseFormField variables={props.variable}>
       <Input
-        type={variableToType(type)}
-        className={errors[name] ? 'mb-1 mt-2 border-red-700' : 'mb-4 mt-1'}
+        type={type === VariableType.DOUBLE || type === VariableType.INT ? 'number' : 'text'}
         id={name}
         step={type === VariableType.DOUBLE ? '0.01' : undefined}
-        disabled={isDisabled}
         placeholder={`Enter ${VARIABLE_TYPES[type]?.toLowerCase()} value`}
         {...register(name, {
           required: required ? `${name} is required` : false,
-          setValueAs: setValue,
+          setValueAs: value => {
+            if (value === '') return undefined
+            
+            if ((type === VariableType.DOUBLE || type === VariableType.INT) && value) {
+              return parseFloat(value)
+            }
+
+            return value
+          },
         })}
       />
-      {errors[name] && (
-        <p className="mb-3 flex items-center gap-1 text-sm text-red-700">
-          <CircleAlert size={16} />
-          {errors[name]?.message}
-        </p>
-      )}
-    </div>
+    </BaseFormField>
   )
 }
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormSelect.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormSelect.tsx
index c3ba897fae..42b73e3dcb 100644
--- a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormSelect.tsx
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormSelect.tsx
@@ -1,33 +1,25 @@
-import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { FormFieldProp } from '@/types'
-import { CircleAlert } from 'lucide-react'
 import { FC, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { accessLevels } from '../../../wfSpec/[...props]/components/Variables'
+import { BaseFormField } from './BaseFormField'
 
-export const FormSelect: FC<FormFieldProp> = props => {
-  const {
-    register,
-    setValue,
-    formState: { errors },
-    getValues,
-    trigger,
-  } = useFormContext()
-  const [isDisabled, setIsDisabled] = useState(false)
+export const FormSelect: FC<FormFieldProp> = (props) => {
+  const { register, setValue, getValues, trigger } = useFormContext()
+  const [isDisabled] = useState(false)
 
-  if (!props.variables?.varDef?.name) return null
+  if (!props.variable?.varDef?.name) return null
 
   const {
-    variables: {
+    variable: {
       varDef: { name },
       required,
-      accessLevel,
     },
   } = props
 
-  const handleChange = (value: string) => {
-    if (value === 'none') setValue(name, undefined)
+  const handleChange = (value: string | null) => {
+    if (value === null) setValue(name, null)
+    else if (value === 'none') setValue(name, undefined)
     else {
       const booleanValue = value === 'true'
       setValue(name, booleanValue)
@@ -38,25 +30,14 @@ export const FormSelect: FC<FormFieldProp> = props => {
   const value = getValues(name)
 
   return (
-    <div>
-      <div className="mb-2 flex justify-between">
-        <Label htmlFor={name} className="center flex items-center gap-2">
-          {name}
-          <span className="rounded bg-green-300 p-1 text-xs">{accessLevels[accessLevel]}</span>
-          {required ? (
-            <span className="rounded bg-red-300 p-1 text-xs">Required</span>
-          ) : (
-            <span className="rounded bg-gray-300 p-1 text-xs">Optional</span>
-          )}
-        </Label>
-      </div>
+    <BaseFormField variables={props.variable}>
       <Select
         value={value?.toString() || ''}
         onValueChange={handleChange}
         disabled={isDisabled}
         {...register(name, { required: required ? `${name} is required` : false })}
       >
-        <SelectTrigger id={name} className={errors[name] ? 'mb-1 mt-1 border-red-700' : 'mb-4 mt-1'}>
+        <SelectTrigger id={name} className="mb-4 mt-1">
           <SelectValue placeholder="Select True or False" />
         </SelectTrigger>
         <SelectContent>
@@ -65,12 +46,6 @@ export const FormSelect: FC<FormFieldProp> = props => {
           <SelectItem value="none">None</SelectItem>
         </SelectContent>
       </Select>
-      {errors[name]?.message && (
-        <p className="mb-3 flex items-center gap-1 text-sm text-red-700">
-          <CircleAlert size={16} />
-          {String(errors[name]?.message)}
-        </p>
-      )}
-    </div>
+    </BaseFormField>
   )
 }
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormTextarea.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormTextarea.tsx
index adebb0dce4..709522d0ea 100644
--- a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormTextarea.tsx
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/FormTextarea.tsx
@@ -1,63 +1,38 @@
-import { Label } from '@/components/ui/label'
+import { VARIABLE_TYPES } from '@/app/constants'
 import { Textarea } from '@/components/ui/textarea'
 import { FormFieldProp } from '@/types'
-import { FC, useState } from 'react'
-
-import { VARIABLE_TYPES } from '@/app/constants'
-import { CircleAlert } from 'lucide-react'
+import { FC } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { accessLevels } from '../../../wfSpec/[...props]/components/Variables'
+import { BaseFormField } from './BaseFormField'
 import { getValidation } from './validation'
 
-export const FormTextarea: FC<FormFieldProp> = props => {
-  const [isDisabled, setIsDisabled] = useState(false)
-  const { setValue, trigger } = useFormContext()
+export const FormTextarea: FC<FormFieldProp> = (props) => {
+  const { setValue, trigger, register } = useFormContext()
+
+  if (!props.variable?.varDef?.name) return null
 
-  if (!props.variables?.varDef?.name) return
   const {
-    variables: {
+    variable: {
       varDef: { type, name },
-      accessLevel,
       required,
     },
-    register,
-    formState: { errors },
   } = props
 
   return (
-    <div>
-      <div className="flex justify-between">
-        <Label htmlFor={name} className="flex items-center gap-2">
-          {name}
-          <span className="rounded bg-green-300 p-1 text-xs">{accessLevels[accessLevel]}</span>
-          {required ? (
-            <span className="rounded bg-red-300 p-1 text-xs">Required</span>
-          ) : (
-            <span className="rounded bg-gray-300 p-1 text-xs">Optional</span>
-          )}
-        </Label>
-      </div>
+    <BaseFormField variables={props.variable}>
       <Textarea
-        className={errors[name] ? 'mb-1 mt-1 min-h-[120px] border-red-700' : 'mb-4 mt-1 rounded-xl'}
         id={name}
-        disabled={isDisabled}
         placeholder={`Enter ${VARIABLE_TYPES[type]?.toLowerCase()} value`}
         {...register(name, {
           required: required ? `${name} is required` : false,
           validate: getValidation(type),
-          onChange: e => {
+          onChange: (e) => {
             setValue(name, e.target.value || undefined)
             trigger(name)
           },
         })}
         defaultValue=""
       />
-      {errors[name] && (
-        <p className="mb-3 flex items-center gap-1 text-sm text-red-700">
-          <CircleAlert size={16} />
-          {errors[name]?.message}
-        </p>
-      )}
-    </div>
+    </BaseFormField>
   )
 }
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/validation.ts b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/validation.ts
index 9bc23754fd..5425506017 100644
--- a/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/validation.ts
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Forms/components/validation.ts
@@ -9,7 +9,7 @@ export const getValidation = (type: string) => {
         }
         return 'Input must be a valid JSON object'
       } catch {
-        return 'Input must be valid JSON'
+        return 'Input must be a valid JSON object'
       }
     },
     JSON_ARR: (value: string) => {
@@ -19,9 +19,9 @@ export const getValidation = (type: string) => {
         if (Array.isArray(parsed) && parsed.every(item => typeof item === 'object')) {
           return true
         }
-        return 'Input must be an array of objects'
+        return 'Input must be a valid JSON array'
       } catch {
-        return 'Input must be valid JSON'
+        return 'Input must be a valid JSON array'
       }
     },
   }
diff --git a/dashboard/src/app/(authenticated)/(diagram)/components/Modals/ExecuteWorkflowRun.tsx b/dashboard/src/app/(authenticated)/(diagram)/components/Modals/ExecuteWorkflowRun.tsx
index a18a1ebf73..80d99ae793 100644
--- a/dashboard/src/app/(authenticated)/(diagram)/components/Modals/ExecuteWorkflowRun.tsx
+++ b/dashboard/src/app/(authenticated)/(diagram)/components/Modals/ExecuteWorkflowRun.tsx
@@ -25,15 +25,6 @@ export const ExecuteWorkflowRun: FC<Modal> = ({ data }) => {
   const formRef = useRef<HTMLFormElement | null>(null)
   const wfSpecVariables = lhWorkflowSpec.threadSpecs?.entrypoint?.variableDefs
 
-  const formatVariablesPayload = (values: FormValues) => {
-    const transformedObj = Object.keys(values).reduce((acc: Record<string, FormValues>, key) => {
-      acc[key] = { [matchVariableType(key)]: values[key] }
-      return acc
-    }, {})
-
-    return transformedObj
-  }
-
   const matchVariableType = (key: string): string => {
     const variable = wfSpecVariables.find((variable: ThreadVarDef) => variable.varDef?.name === key)
 
@@ -51,21 +42,29 @@ export const ExecuteWorkflowRun: FC<Modal> = ({ data }) => {
     }
   }
 
+  const formatVariablesPayload = (values: FormValues) => {
+    return Object.keys(values).reduce((acc: Record<string, FormValues>, key) => {
+      acc[key] = { [matchVariableType(key)]: values[key] ?? null }
+      return acc
+    }, {})
+  }
+
   const handleFormSubmit = async (values: FormValues) => {
-    const customWfRunId = values['custom-id-wfRun-flow'] as string
-    delete values['custom-id-wfRun-flow']
+    const customWfRunId = values.customWfRunId as string
+    // This is so we don't add it to the variables payload due to loose typings
+    delete values.customWfRunId
     if (!lhWorkflowSpec.id) return
     try {
       const wfRun = await runWfSpec({
-        ...lhWorkflowSpec.id,
-        wfSpecName: lhWorkflowSpec.id.name,
         tenantId,
+        wfSpecName: lhWorkflowSpec.id.name,
+        majorVersion: lhWorkflowSpec.id.majorVersion,
+        revision: lhWorkflowSpec.id.revision,
         id: customWfRunId || undefined,
-        variables: formatVariablesPayload(values),
+        variables: formatVariablesPayload(values)
       })
       if (!wfRun.id) return
       toast.success('Workflow has been executed')
-      setShowModal(false)
       router.push(`/wfRun/${wfRun.id.id}`)
     } catch (error: any) {
       toast.error(error.message?.split(':')?.[1])
diff --git a/dashboard/src/types/index.ts b/dashboard/src/types/index.ts
index 12bdefb559..0883216556 100644
--- a/dashboard/src/types/index.ts
+++ b/dashboard/src/types/index.ts
@@ -1,6 +1,6 @@
+import { ThreadVarDef } from 'littlehorse-client/proto'
 import { DefaultSession } from 'next-auth'
 import { FieldValues, UseFormRegister } from 'react-hook-form'
-import { ThreadVarDef } from 'littlehorse-client/proto'
 
 export type WhoAmI = {
   user: DefaultSession['user']
@@ -26,8 +26,7 @@ export type WfSpecData = {
 }
 
 export type FormFieldProp = {
-  variables?: ThreadVarDef
-  custom?: boolean
+  variable: ThreadVarDef
   formState: any
   register: UseFormRegister<FieldValues>
 }