diff --git a/web/app/components/workflow-app/components/workflow-header/index.tsx b/web/app/components/workflow-app/components/workflow-header/index.tsx
index 53a050146e..c0b8a37b87 100644
--- a/web/app/components/workflow-app/components/workflow-header/index.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/index.tsx
@@ -41,8 +41,8 @@ const WorkflowHeader = () => {
     return {
       normal: {
         components: {
-          left: <ChatVariableTrigger />,
           middle: <FeaturesTrigger />,
+          chatVariableTrigger: <ChatVariableTrigger />,
         },
         runAndHistoryProps: {
           showRunButton: !isChatMode,
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 36c4a640c4..8fdc86e6f7 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -25,6 +25,7 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
       )}
       disabled={disabled}
       onClick={handleClick}
+      variant='ghost'
     >
       <BubbleX className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index fbb664fbf5..896bdcb543 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -26,6 +26,7 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
         'p-2',
         theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
       )}
+      variant='ghost'
       disabled={disabled}
       onClick={handleClick}
     >
diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 9ea58afffd..4db77bf2b0 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -25,6 +25,7 @@ export type HeaderInNormalProps = {
   components?: {
     left?: React.ReactNode
     middle?: React.ReactNode
+    chatVariableTrigger?: React.ReactNode
   }
   runAndHistoryProps?: RunAndHistoryProps
 }
@@ -69,9 +70,12 @@ const HeaderInNormal = ({
       </div>
       <div className='flex items-center gap-2'>
         {components?.left}
-        <EnvButton disabled={nodesReadOnly} />
         <Divider type='vertical' className='mx-auto h-3.5' />
         <RunAndHistory {...runAndHistoryProps} />
+        <div className='cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]'>
+          {components?.chatVariableTrigger}
+          <EnvButton disabled={nodesReadOnly} />
+        </div>
         {components?.middle}
         <VersionHistoryButton onClick={onStartRestoring} />
       </div>