diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 0e3cf10c09..2d1f4431ef 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -41,6 +41,7 @@ export type ISelectProps = {
   optionWrapClassName?: string
   optionClassName?: string
   hideChecked?: boolean
+  notClearable?: boolean
   renderOption?: ({
     item,
     selected,
@@ -179,6 +180,7 @@ const SimpleSelect: FC<ISelectProps> = ({
   optionWrapClassName,
   optionClassName,
   hideChecked,
+  notClearable,
   renderOption,
 }) => {
   const { t } = useTranslation()
@@ -205,13 +207,13 @@ const SimpleSelect: FC<ISelectProps> = ({
         }
       }}
     >
-      <div className={classNames('relative h-9', wrapperClassName)}>
+      <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
         {renderTrigger && <Listbox.Button className='w-full'>{renderTrigger(selectedItem)}</Listbox.Button>}
         {!renderTrigger && (
-          <Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
-            <span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
+          <Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
+            <span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
             <span className="absolute inset-y-0 right-0 flex items-center pr-2">
-              {selectedItem
+              {(selectedItem && !notClearable)
                 ? (
                   <XMarkIcon
                     onClick={(e) => {
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index e60e34b45f..bd895930f3 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -248,13 +248,15 @@ const ConditionItem = ({
         }
         {
           !comparisonOperatorNotRequireValue(condition.comparison_operator) && isSelect && (
-            <div className='p-1'>
+            <div className='border-t border-t-divider-subtle'>
               <Select
-                wrapperClassName='h-6'
-                className='pl-0 text-xs'
+                wrapperClassName='h-8'
+                className='px-2 text-xs rounded-t-none'
                 defaultValue={condition.value}
                 items={selectOptions}
                 onSelect={item => handleUpdateConditionValue(item.value as string)}
+                hideChecked
+                notClearable
               />
             </div>
           )