diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index dee983690b..660899412b 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -24,7 +24,7 @@ const defaultItems = [
 export type Item = {
   value: number | string
   name: string
-}
+} & Record<string, any>
 
 export type ISelectProps = {
   className?: string
@@ -38,6 +38,13 @@ export type ISelectProps = {
   placeholder?: string
   overlayClassName?: string
   optionClassName?: string
+  renderOption?: ({
+    item,
+    selected,
+  }: {
+    item: Item
+    selected: boolean
+  }) => React.ReactNode
 }
 const Select: FC<ISelectProps> = ({
   className,
@@ -49,6 +56,7 @@ const Select: FC<ISelectProps> = ({
   bgClassName = 'bg-gray-100',
   overlayClassName,
   optionClassName,
+  renderOption,
 }) => {
   const [query, setQuery] = useState('')
   const [open, setOpen] = useState(false)
@@ -61,6 +69,7 @@ const Select: FC<ISelectProps> = ({
       defaultSelect = existed
 
     setSelectedItem(defaultSelect)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValue])
 
   const filteredItems: Item[]
@@ -120,24 +129,30 @@ const Select: FC<ISelectProps> = ({
                 value={item}
                 className={({ active }: { active: boolean }) =>
                   classNames(
-                    optionClassName,
                     'relative cursor-default select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700',
                     active ? 'bg-gray-100' : '',
+                    optionClassName,
                   )
                 }
               >
                 {({ /* active, */ selected }) => (
                   <>
-                    <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
-                    {selected && (
-                      <span
-                        className={classNames(
-                          'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
-                        )}
-                      >
-                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                      </span>
-                    )}
+                    {renderOption
+                      ? renderOption({ item, selected })
+                      : (
+                        <>
+                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          {selected && (
+                            <span
+                              className={classNames(
+                                'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
+                              )}
+                            >
+                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                            </span>
+                          )}
+                        </>
+                      )}
                   </>
                 )}
               </Combobox.Option>
@@ -157,6 +172,8 @@ const SimpleSelect: FC<ISelectProps> = ({
   disabled = false,
   onSelect,
   placeholder,
+  optionClassName,
+  renderOption,
 }) => {
   const { t } = useTranslation()
   const localPlaceholder = placeholder || t('common.placeholder.select')
@@ -169,6 +186,7 @@ const SimpleSelect: FC<ISelectProps> = ({
       defaultSelect = existed
 
     setSelectedItem(defaultSelect)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValue])
 
   return (
@@ -218,24 +236,30 @@ const SimpleSelect: FC<ISelectProps> = ({
                 <Listbox.Option
                   key={item.value}
                   className={({ active }) =>
-                    `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''
-                    }`
+                    classNames(
+                      `relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-gray-100 text-gray-700 ${active ? 'bg-gray-100' : ''}`,
+                      optionClassName,
+                    )
                   }
                   value={item}
                   disabled={disabled}
                 >
                   {({ /* active, */ selected }) => (
                     <>
-                      <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
-                      {selected && (
-                        <span
-                          className={classNames(
-                            'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
+                      {renderOption
+                        ? renderOption({ item, selected })
+                        : (<>
+                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          {selected && (
+                            <span
+                              className={classNames(
+                                'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
+                              )}
+                            >
+                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                            </span>
                           )}
-                        >
-                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                        </span>
-                      )}
+                        </>)}
                     </>
                   )}
                 </Listbox.Option>
diff --git a/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
new file mode 100644
index 0000000000..5fa89c566b
--- /dev/null
+++ b/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
@@ -0,0 +1,11 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+const FilterCondition: FC = () => {
+  return (
+    <div>
+    </div>
+  )
+}
+export default React.memo(FilterCondition)
diff --git a/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
new file mode 100644
index 0000000000..bb973bf799
--- /dev/null
+++ b/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
@@ -0,0 +1,36 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { SimpleSelect as Select } from '@/app/components/base/select'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+
+const SubVariablePicker: FC = () => {
+  const renderOption = ({ item }: { item: Record<string, any> }) => {
+    return (
+      <div className='flex items-center h-6 justify-between'>
+        <div className='flex items-center h-full'>
+          <Variable02 className='mr-[5px] w-3.5 h-3.5 text-text-accent' />
+          <span className='text-text-secondary system-sm-medium'>{item.name}</span>
+        </div>
+        <span className='text-text-tertiary system-xs-regular'>{item.type}</span>
+      </div>
+    )
+  }
+  return (
+    <div>
+      <Select
+        items={[
+          { value: '1', name: 'name', type: 'string' },
+          { value: '2', name: 'age', type: 'number' },
+        ]}
+        defaultValue={'1'}
+        allowSearch
+        onSelect={() => { }}
+        placeholder='Select sub variable key'
+        optionClassName='pl-4 pr-5 py-0'
+        renderOption={renderOption}
+      />
+    </div>
+  )
+}
+export default React.memo(SubVariablePicker)
diff --git a/web/app/components/workflow/nodes/list-filter/panel.tsx b/web/app/components/workflow/nodes/list-filter/panel.tsx
index 75082561e9..0053353281 100644
--- a/web/app/components/workflow/nodes/list-filter/panel.tsx
+++ b/web/app/components/workflow/nodes/list-filter/panel.tsx
@@ -5,6 +5,7 @@ import VarReferencePicker from '../_base/components/variable/var-reference-picke
 import OutputVars, { VarItem } from '../_base/components/output-vars'
 import OptionCard from '../_base/components/option-card'
 import useConfig from './use-config'
+import SubVariablePicker from './components/sub-variable-picker'
 import { type ListFilterNodeType, OrderBy } from './types'
 import LimitConfig from './components/limit-config'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -59,7 +60,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           {inputs.orderBy?.enabled
             ? (
               <div className='flex items-center justify-between'>
-                <div className='grow'>Variable Picker placeholder</div>
+                <div className='grow mr-2'><SubVariablePicker /></div>
                 <div className='shrink-0 flex space-x-1'>
                   <OptionCard
                     title={t(`${i18nPrefix}.asc`)}