diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index 2c6212bf2b..b411a5a839 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -48,7 +48,7 @@ const Page: FC = () => {
         * 2 directAnswer 3: llm 5: questionClassifier
         * 7 Code, 8 TemplateTransform
         */
-        selectedNodeId='8'
+        selectedNodeId='3'
       />
     </div>
   )
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index b37bf11a62..ef00931557 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -33,32 +33,37 @@ const Panel: FC = () => {
     handleCodeLanguageChange,
   } = useConfig(mockData)
   return (
-    <div className='mt-2 px-4 space-y-4'>
-      <Field
-        title={t(`${i18nPrefix}.inputVars`)}
-        operations={
-          <AddButton onClick={handleAddVariable} />
-        }
-      >
-        <VarList
-          readonly={readOnly}
-          list={inputs.variables}
-          onChange={handleVarListChange}
-        />
-      </Field>
-      <Split />
-      <CodeEditor
-        title={
-          <TypeSelector
-            list={codeLanguages}
-            value={inputs.code_language}
-            onChange={handleCodeLanguageChange}
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.inputVars`)}
+          operations={
+            <AddButton onClick={handleAddVariable} />
+          }
+        >
+          <VarList
+            readonly={readOnly}
+            list={inputs.variables}
+            onChange={handleVarListChange}
           />
-        }
-        value={inputs.code}
-        onChange={handleCodeChange}
-      />
+        </Field>
+        <Split />
+        <CodeEditor
+          title={
+            <TypeSelector
+              list={codeLanguages}
+              value={inputs.code_language}
+              onChange={handleCodeLanguageChange}
+            />
+          }
+          value={inputs.code}
+          onChange={handleCodeChange}
+        />
+      </div>
       <Split />
+      <div className='px-4 pt-4 pb-2'>
+        output var
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/direct-answer/use-config.ts b/web/app/components/workflow/nodes/direct-answer/use-config.ts
index 9b189e782c..55a6f724c8 100644
--- a/web/app/components/workflow/nodes/direct-answer/use-config.ts
+++ b/web/app/components/workflow/nodes/direct-answer/use-config.ts
@@ -1,27 +1,15 @@
 import { useCallback, useState } from 'react'
 import produce from 'immer'
-import type { Variable } from '../../types'
+import useVarList from '../_base/hooks/use-var-list'
 import type { DirectAnswerNodeType } from './types'
 
 const useConfig = (initInputs: DirectAnswerNodeType) => {
   const [inputs, setInputs] = useState<DirectAnswerNodeType>(initInputs)
   // variables
-  const handleVarListChange = useCallback((newList: Variable[]) => {
-    const newInputs = produce(inputs, (draft) => {
-      draft.variables = newList
-    })
-    setInputs(newInputs)
-  }, [inputs, setInputs])
-
-  const handleAddVariable = useCallback(() => {
-    const newInputs = produce(inputs, (draft) => {
-      draft.variables.push({
-        variable: '',
-        value_selector: [],
-      })
-    })
-    setInputs(newInputs)
-  }, [inputs, setInputs])
+  const { handleVarListChange, handleAddVariable } = useVarList<DirectAnswerNodeType>({
+    inputs,
+    setInputs,
+  })
 
   const handleAnswerChange = useCallback((value: string) => {
     const newInputs = produce(inputs, (draft) => {
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index d565ff8fa9..6b6b9b30b4 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -29,80 +29,85 @@ const Panel: FC = () => {
   // const isChatMode = modelMode === 'chat'
 
   return (
-    <div className='mt-2 px-4 space-y-4'>
-      <Field
-        title={t(`${i18nPrefix}.model`)}
-      >
-        <ModelParameterModal
-          popupClassName='!w-[387px]'
-          isAdvancedMode={true}
-          mode={model?.mode}
-          provider={model?.provider}
-          completionParams={model.completion_params}
-          modelId={model.name}
-          setModel={handleModelChanged}
-          onCompletionParamsChange={handleCompletionParamsChange}
-          hideDebugWithMultipleModel
-          debugWithMultipleModel={false}
-        />
-      </Field>
-
-      <Field
-        title={t(`${i18nPrefix}.variables`)}
-        operations={
-          <AddButton onClick={handleAddVariable} />
-        }
-      >
-        <VarList
-          readonly={readOnly}
-          list={inputs.variables}
-          onChange={handleVarListChange}
-        />
-      </Field>
-
-      <Field
-        title={t(`${i18nPrefix}.context`)}
-        operations={
-          <Switch
-            defaultValue={inputs.context.enabled}
-            onChange={toggleContextEnabled}
-            size='md'
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.model`)}
+        >
+          <ModelParameterModal
+            popupClassName='!w-[387px]'
+            isAdvancedMode={true}
+            mode={model?.mode}
+            provider={model?.provider}
+            completionParams={model.completion_params}
+            modelId={model.name}
+            setModel={handleModelChanged}
+            onCompletionParamsChange={handleCompletionParamsChange}
+            hideDebugWithMultipleModel
+            debugWithMultipleModel={false}
           />
-        }
-      >
-        {inputs.context.enabled
-          ? (
-            <div>Context</div>
-          )
-          : null}
-      </Field>
-      <Field
-        title={t(`${i18nPrefix}.prompt`)}
-      >
-        Prompt
-      </Field>
+        </Field>
+
+        <Field
+          title={t(`${i18nPrefix}.variables`)}
+          operations={
+            <AddButton onClick={handleAddVariable} />
+          }
+        >
+          <VarList
+            readonly={readOnly}
+            list={inputs.variables}
+            onChange={handleVarListChange}
+          />
+        </Field>
+
+        <Field
+          title={t(`${i18nPrefix}.context`)}
+          operations={
+            <Switch
+              defaultValue={inputs.context.enabled}
+              onChange={toggleContextEnabled}
+              size='md'
+            />
+          }
+        >
+          {inputs.context.enabled
+            ? (
+              <div>Context</div>
+            )
+            : null}
+        </Field>
+        <Field
+          title={t(`${i18nPrefix}.prompt`)}
+        >
+          Prompt
+        </Field>
+        <Split />
+        <Field
+          title={t(`${i18nPrefix}.vision`)}
+          inline
+        >
+          Vision
+        </Field>
+      </div>
       <Split />
-      <Field
-        title={t(`${i18nPrefix}.vision`)}
-        inline
-      >
-        Vision
-      </Field>
+      <div className='px-4 pt-4 pb-2'>
+        <OutputVars>
+          <>
+            <VarItem
+              name='output'
+              type='string'
+              description={t(`${i18nPrefix}.outputVars.output`)}
+            />
+            <VarItem
+              name='usage'
+              type='object'
+              description={t(`${i18nPrefix}.outputVars.usage`)}
+            />
+          </>
+        </OutputVars>
+      </div>
 
-      <OutputVars>
-        <>
-          <VarItem
-            name='output'
-            type='string'
-            description={t(`${i18nPrefix}.outputVars.output`)}
-          />
-          <VarItem
-            name='usage'
-            type='object'
-            description={t(`${i18nPrefix}.outputVars.usage`)}
-          />
-        </>
-      </OutputVars>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/template-transform/node.tsx b/web/app/components/workflow/nodes/template-transform/node.tsx
index b3261c4416..09b5acfb1f 100644
--- a/web/app/components/workflow/nodes/template-transform/node.tsx
+++ b/web/app/components/workflow/nodes/template-transform/node.tsx
@@ -2,7 +2,8 @@ import type { FC } from 'react'
 
 const Node: FC = () => {
   return (
-    <div>template-transform</div>
+    // No summary content
+    <div></div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index e91f2955e1..efc34b8f57 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -23,49 +23,54 @@ const Panel: FC = () => {
     handleCodeChange,
   } = useConfig(mockData)
   return (
-    <div className='mt-2 px-4 space-y-4'>
-      <Field
-        title={t(`${i18nPrefix}.inputVars`)}
-        operations={
-          <AddButton onClick={handleAddVariable} />
-        }
-      >
-        <VarList
-          readonly={readOnly}
-          list={inputs.variables}
-          onChange={handleVarListChange}
-        />
-      </Field>
-      <Split />
-      <CodeEditor
-        title={
-          <div className='uppercase'>{t(`${i18nPrefix}.code`)}</div>
-        }
-        headerRight={
-          <div className='flex items-center'>
-            <a
-              className='flex items-center space-x-0.5 h-[18px] text-xs font-normal text-gray-500'
-              href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
-              target='_blank'>
-              <span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
-              <HelpCircle className='w-3 h-3' />
-            </a>
-            <div className='mx-1.5 w-px h-3 bg-gray-200'></div>
-          </div>
-        }
-        value={inputs.template}
-        onChange={handleCodeChange}
-      />
-      <Split />
-      <OutputVars>
-        <>
-          <VarItem
-            name='output'
-            type='string'
-            description={t(`${i18nPrefix}.outputVars.output`)}
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+
+        <Field
+          title={t(`${i18nPrefix}.inputVars`)}
+          operations={
+            <AddButton onClick={handleAddVariable} />
+          }
+        >
+          <VarList
+            readonly={readOnly}
+            list={inputs.variables}
+            onChange={handleVarListChange}
           />
-        </>
-      </OutputVars>
+        </Field>
+        <Split />
+        <CodeEditor
+          title={
+            <div className='uppercase'>{t(`${i18nPrefix}.code`)}</div>
+          }
+          headerRight={
+            <div className='flex items-center'>
+              <a
+                className='flex items-center space-x-0.5 h-[18px] text-xs font-normal text-gray-500'
+                href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
+                target='_blank'>
+                <span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
+                <HelpCircle className='w-3 h-3' />
+              </a>
+              <div className='mx-1.5 w-px h-3 bg-gray-200'></div>
+            </div>
+          }
+          value={inputs.template}
+          onChange={handleCodeChange}
+        />
+      </div>
+      <Split />
+      <div className='px-4 pt-4 pb-2'>
+        <OutputVars>
+          <>
+            <VarItem
+              name='output'
+              type='string'
+              description={t(`${i18nPrefix}.outputVars.output`)}
+            />
+          </>
+        </OutputVars>
+      </div>
     </div>
   )
 }