diff --git a/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg b/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg
new file mode 100644
index 0000000000..d654264b5d
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-down-round-fill">
+<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="#101828" fill-opacity="0.3"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.json b/web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.json
new file mode 100644
index 0000000000..b56fb09888
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.json
@@ -0,0 +1,37 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "arrow-down-round-fill"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector",
+							"d": "M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z",
+							"fill": "currentColor",
+							"fill-opacity": "0.3"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "ArrowDownRoundFill"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.tsx b/web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.tsx
new file mode 100644
index 0000000000..c766a72b94
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/general/ArrowDownRoundFill.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ArrowDownRoundFill.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'ArrowDownRoundFill'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/general/index.ts b/web/app/components/base/icons/src/vender/solid/general/index.ts
index 52647905ab..4c4dd9a437 100644
--- a/web/app/components/base/icons/src/vender/solid/general/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/general/index.ts
@@ -1,4 +1,5 @@
 export { default as AnswerTriangle } from './AnswerTriangle'
+export { default as ArrowDownRoundFill } from './ArrowDownRoundFill'
 export { default as CheckCircle } from './CheckCircle'
 export { default as CheckDone01 } from './CheckDone01'
 export { default as Download02 } from './Download02'
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index 36ee9c1751..a877d02be4 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { useState } from 'react'
-import { RiArrowDropRightLine } from '@remixicon/react'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import cn from '@/utils/classnames'
 
 export { default as FieldCollapse } from './field-collapse'
@@ -27,9 +27,9 @@ const Collapse = ({
 
   return (
     <>
-      <div className='flex items-center'>
+      <div className='group/collapse flex items-center'>
         <div
-          className='flex grow items-center'
+          className='ml-4 flex grow items-center'
           onClick={() => {
             if (!disabled) {
               setCollapsedLocal(!collapsedMerged)
@@ -37,19 +37,19 @@ const Collapse = ({
             }
           }}
         >
+          {trigger}
           <div className='h-4 w-4 shrink-0'>
             {
               !disabled && (
-                <RiArrowDropRightLine
+                <ArrowDownRoundFill
                   className={cn(
-                    'h-4 w-4 text-text-tertiary',
-                    !collapsedMerged && 'rotate-90',
+                    'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
+                    collapsedMerged && 'rotate-[270deg]',
                   )}
                 />
               )
             }
           </div>
-          {trigger}
         </div>
         {operations}
       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index 8414b2225e..63b4880851 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -43,12 +43,12 @@ const Field: FC<Props> = ({
                 onClick={toggleFold}
               />
             )}
-            <div className={cn('system-sm-medium h-6 truncate leading-6 text-text-secondary', isRoot && rootClassName)}>{name}</div>
+            <div className={cn('system-sm-medium ml-[7px] h-6 truncate leading-6 text-text-secondary', isRoot && rootClassName)}>{name}</div>
             <div className='system-xs-regular ml-3 shrink-0 leading-6 text-text-tertiary'>{getFieldType(payload)}</div>
             {required && <div className='system-2xs-medium-uppercase ml-3 leading-6 text-text-warning'>{t('app.structOutput.required')}</div>}
           </div>
           {payload.description && (
-            <div className='flex'>
+            <div className='ml-[7px] flex'>
               <div className='system-xs-regular w-0 grow truncate text-text-tertiary'>{payload.description}</div>
             </div>
           )}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
index 001613d4f3..475c119647 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -14,9 +14,9 @@ const TreeIndentLine: FC<Props> = ({
 }) => {
   const depthArray = Array.from({ length: depth }, (_, index) => index)
   return (
-    <div className={cn('ml-2.5 mr-2.5 flex space-x-[12px]', className)}>
+    <div className={cn('flex', className)}>
       {depthArray.map(d => (
-        <div key={d} className={cn('w-px bg-divider-regular')}></div>
+        <div key={d} className={cn('ml-2.5 mr-2.5 w-px bg-divider-regular')}></div>
       ))}
     </div>
   )