diff --git a/web/app/components/goto-anything/context.tsx b/web/app/components/goto-anything/context.tsx
index fee4b72c91..25fe2ddf96 100644
--- a/web/app/components/goto-anything/context.tsx
+++ b/web/app/components/goto-anything/context.tsx
@@ -3,6 +3,7 @@
 import type { ReactNode } from 'react'
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
+import { isInWorkflowPage } from '../workflow/constants'
 
 /**
  * Interface for the GotoAnything context
@@ -50,7 +51,7 @@ export const GotoAnythingProvider: React.FC<GotoAnythingProviderProps> = ({ chil
     }
 
     // Workflow pages: /app/[appId]/workflow or /workflow/[token] (shared)
-    const isWorkflow = /^\/app\/[^/]+\/workflow$/.test(pathname) || /^\/workflow\/[^/]+$/.test(pathname)
+    const isWorkflow = isInWorkflowPage()
     // RAG Pipeline pages: /datasets/[datasetId]/pipeline
     const isRagPipeline = /^\/datasets\/[^/]+\/pipeline$/.test(pathname)
 
diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts
index e1727753fa..eb93ab916d 100644
--- a/web/app/components/workflow/constants.ts
+++ b/web/app/components/workflow/constants.ts
@@ -35,7 +35,12 @@ export const NODE_LAYOUT_HORIZONTAL_PADDING = 60
 export const NODE_LAYOUT_VERTICAL_PADDING = 60
 export const NODE_LAYOUT_MIN_DISTANCE = 100
 
+export const isInWorkflowPage = () => {
+  const pathname = globalThis.location.pathname
+  return /^\/app\/[^/]+\/workflow$/.test(pathname) || /^\/workflow\/[^/]+$/.test(pathname)
+}
 export const getGlobalVars = (isChatMode: boolean): Var[] => {
+  const isInWorkflow = isInWorkflowPage()
   const vars: Var[] = [
     ...(isChatMode ? [
       {
@@ -63,6 +68,12 @@ export const getGlobalVars = (isChatMode: boolean): Var[] => {
       variable: 'sys.workflow_run_id',
       type: VarType.string,
     },
+    ...(isInWorkflow ? [
+      {
+        variable: 'sys.trigger_timestamp',
+        type: VarType.string,
+      },
+    ] : []),
   ]
   return vars
 }
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index 597c91651e..fd69dd5c7c 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -11,7 +11,7 @@ const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
   }
 
   return (
-    <Button className='p-2' disabled={disabled} onClick={handleClick}>
+    <Button className='p-2' disabled={disabled} onClick={handleClick} variant='ghost'>
       <GlobalVariable className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
   )
diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 4db77bf2b0..9b0fdec41b 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -20,6 +20,7 @@ import EnvButton from './env-button'
 import VersionHistoryButton from './version-history-button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import ScrollToSelectedNodeButton from './scroll-to-selected-node-button'
+import GlobalVariableButton from './global-variable-button'
 
 export type HeaderInNormalProps = {
   components?: {
@@ -72,9 +73,10 @@ const HeaderInNormal = ({
         {components?.left}
         <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]'>
+        <div className='shrink-0 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} />
+          <GlobalVariableButton disabled={nodesReadOnly} />
         </div>
         {components?.middle}
         <VersionHistoryButton onClick={onStartRestoring} />
diff --git a/web/app/components/workflow/panel/global-variable-panel/index.tsx b/web/app/components/workflow/panel/global-variable-panel/index.tsx
index ad7996ab0c..3deea891db 100644
--- a/web/app/components/workflow/panel/global-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -8,16 +8,53 @@ import Item from './item'
 import { useStore } from '@/app/components/workflow/store'
 
 import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import { useIsChatMode } from '../../hooks'
+import { isInWorkflowPage } from '../../constants'
 
 const Panel = () => {
+  const { t } = useTranslation()
+  const isChatMode = useIsChatMode()
   const setShowPanel = useStore(s => s.setShowGlobalVariablePanel)
+  const isWorkflowPage = isInWorkflowPage()
 
   const globalVariableList: GlobalVariable[] = [
-    {
+    ...(isChatMode ? [{
       name: 'conversation_id',
-      value_type: 'string',
-      description: 'conversation id',
+      value_type: 'string' as const,
+      description: t('workflow.globalVar.fieldsDescription.conversationId'),
     },
+    {
+      name: 'dialog_count',
+      value_type: 'number' as const,
+      description: t('workflow.globalVar.fieldsDescription.dialogCount'),
+    }] : []),
+    {
+      name: 'user_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.userId'),
+    },
+    {
+      name: 'app_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.appId'),
+    },
+    {
+      name: 'workflow_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.workflowId'),
+    },
+    {
+      name: 'workflow_run_id',
+      value_type: 'string',
+      description: t('workflow.globalVar.fieldsDescription.workflowRunId'),
+    },
+    // is workflow
+    ...(isWorkflowPage ? [{
+      name: 'trigger_timestamp',
+      value_type: 'string' as const,
+      description: t('workflow.globalVar.fieldsDescription.triggerTimestamp'),
+    }] : []),
   ]
 
   return (
@@ -27,7 +64,7 @@ const Panel = () => {
       )}
     >
       <div className='system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary'>
-        Global Variables(Current not show)
+        {t('workflow.globalVar.title')}
         <div className='flex items-center'>
           <div
             className='flex h-6 w-6 cursor-pointer items-center justify-center'
@@ -37,9 +74,9 @@ const Panel = () => {
           </div>
         </div>
       </div>
-      <div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>...</div>
+      <div className='system-sm-regular shrink-0 px-4 py-1 text-text-tertiary'>{t('workflow.globalVar.description')}</div>
 
-      <div className='grow overflow-y-auto rounded-b-2xl px-4'>
+      <div className='mt-4 grow overflow-y-auto rounded-b-2xl px-4'>
         {globalVariableList.map(item => (
           <Item
             key={item.name}
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index ddf9abe1d3..5185c1bead 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react'
 import { capitalize } from 'lodash-es'
-import { Env } from '@/app/components/base/icons/src/vender/line/others'
+import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
+
 import type { GlobalVariable } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
@@ -17,12 +18,15 @@ const Item = ({
     )}>
       <div className='flex items-center justify-between'>
         <div className='flex grow items-center gap-1'>
-          <Env className='h-4 w-4 text-util-colors-violet-violet-600' />
-          <div className='system-sm-medium text-text-primary'>{payload.name}</div>
+          <GlobalVariableIcon className='h-4 w-4 text-util-colors-orange-orange-600' />
+          <div className='system-sm-medium text-text-primary'>
+            <span className='text-text-tertiary'>sys.</span>
+            {payload.name}
+          </div>
           <div className='system-xs-medium text-text-tertiary'>{capitalize(payload.value_type)}</div>
         </div>
       </div>
-      <div className='system-xs-regular truncate text-text-tertiary'>{payload.description}</div>
+      <div className='system-xs-regular mt-1.5 truncate text-text-tertiary'>{payload.description}</div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/store/workflow/chat-variable-slice.ts b/web/app/components/workflow/store/workflow/chat-variable-slice.ts
index 0d81446005..96fe8b00b8 100644
--- a/web/app/components/workflow/store/workflow/chat-variable-slice.ts
+++ b/web/app/components/workflow/store/workflow/chat-variable-slice.ts
@@ -20,7 +20,12 @@ export const createChatVariableSlice: StateCreator<ChatVariableSliceShape> = (se
 
   return ({
     showChatVariablePanel: false,
-    setShowChatVariablePanel: showChatVariablePanel => set(() => ({ showChatVariablePanel })),
+    setShowChatVariablePanel: showChatVariablePanel => set(() => {
+      if (showChatVariablePanel)
+        return { ...hideAllPanel, showChatVariablePanel: true }
+      else
+        return { showChatVariablePanel: false }
+    }),
     showGlobalVariablePanel: false,
     setShowGlobalVariablePanel: showGlobalVariablePanel => set(() => {
       if (showGlobalVariablePanel)
diff --git a/web/app/components/workflow/store/workflow/env-variable-slice.ts b/web/app/components/workflow/store/workflow/env-variable-slice.ts
index de60e7dd5f..2ba6ce084a 100644
--- a/web/app/components/workflow/store/workflow/env-variable-slice.ts
+++ b/web/app/components/workflow/store/workflow/env-variable-slice.ts
@@ -10,11 +10,24 @@ export type EnvVariableSliceShape = {
   setEnvSecrets: (envSecrets: Record<string, string>) => void
 }
 
-export const createEnvVariableSlice: StateCreator<EnvVariableSliceShape> = set => ({
-  showEnvPanel: false,
-  setShowEnvPanel: showEnvPanel => set(() => ({ showEnvPanel })),
-  environmentVariables: [],
-  setEnvironmentVariables: environmentVariables => set(() => ({ environmentVariables })),
-  envSecrets: {},
-  setEnvSecrets: envSecrets => set(() => ({ envSecrets })),
-})
+export const createEnvVariableSlice: StateCreator<EnvVariableSliceShape> = (set) => {
+  const hideAllPanel = {
+    showDebugAndPreviewPanel: false,
+    showEnvPanel: false,
+    showChatVariablePanel: false,
+    showGlobalVariablePanel: false,
+  }
+  return ({
+    showEnvPanel: false,
+    setShowEnvPanel: showEnvPanel => set(() => {
+      if (showEnvPanel)
+        return { ...hideAllPanel, showEnvPanel: true }
+      else
+        return { showEnvPanel: false }
+    }),
+    environmentVariables: [],
+    setEnvironmentVariables: environmentVariables => set(() => ({ environmentVariables })),
+    envSecrets: {},
+    setEnvSecrets: envSecrets => set(() => ({ envSecrets })),
+  })
+}
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index cd3570e05a..a967a82bb2 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -146,6 +146,19 @@ const translation = {
       export: 'Export DSL with secret values ',
     },
   },
+  globalVar: {
+    title: 'System Variables',
+    description: 'System variables are global variables that can be referenced by any node without wiring when the type is correct, such as end-user ID and workflow ID.',
+    fieldsDescription: {
+      conversationId: 'Conversation ID',
+      dialogCount: 'Conversation Count',
+      userId: 'User ID',
+      triggerTimestamp: 'Application trigger time',
+      appId: 'Application ID',
+      workflowId: 'Workflow ID',
+      workflowRunId: 'Workflow run ID',
+    },
+  },
   sidebar: {
     exportWarning: 'Export Current Saved Version',
     exportWarningDesc: 'This will export the current saved version of your workflow. If you have unsaved changes in the editor, please save them first by using the export option in the workflow canvas.',