diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index dd00077dab..a31a2d1f58 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import React, { useCallback } from 'react'
 import produce from 'immer'
 import type { Authorization as AuthorizationPayloadType } from '../../types'
@@ -7,6 +8,9 @@ import { APIType, AuthorizationType } from '../../types'
 import RadioGroup from './radio-group'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+
+const i18nPrefix = 'workflow.nodes.http.authorization'
+
 type Props = {
   payload: AuthorizationPayloadType
   onChange: (newPayload: AuthorizationPayloadType) => void
@@ -29,6 +33,8 @@ const Authorization: FC<Props> = ({
   isShow,
   onHide,
 }) => {
+  const { t } = useTranslation()
+
   const [tempPayload, setTempPayload] = React.useState<AuthorizationPayloadType>(payload)
   const handleAuthTypeChange = useCallback((type: string) => {
     const newPayload = produce(tempPayload, (draft: AuthorizationPayloadType) => {
@@ -84,11 +90,11 @@ const Authorization: FC<Props> = ({
     >
       <div>
         <div className='space-y-2'>
-          <Field title='Type'>
+          <Field title={t(`${i18nPrefix}.authorizationType`)}>
             <RadioGroup
               options={[
-                { value: AuthorizationType.none, label: 'Basic' },
-                { value: AuthorizationType.apiKey, label: 'Bearer' },
+                { value: AuthorizationType.none, label: t(`${i18nPrefix}.no-auth`) },
+                { value: AuthorizationType.apiKey, label: t(`${i18nPrefix}.api-key`) },
               ]}
               value={tempPayload.type}
               onChange={handleAuthTypeChange}
@@ -97,19 +103,19 @@ const Authorization: FC<Props> = ({
 
           {tempPayload.type === AuthorizationType.apiKey && (
             <>
-              <Field title='Auth type'>
+              <Field title={t(`${i18nPrefix}.auth-type`)}>
                 <RadioGroup
                   options={[
-                    { value: APIType.basic, label: 'Basic' },
-                    { value: APIType.bearer, label: 'Bearer' },
-                    { value: APIType.custom, label: 'Custom' },
+                    { value: APIType.basic, label: t(`${i18nPrefix}.basic`) },
+                    { value: APIType.bearer, label: t(`${i18nPrefix}.bearer`) },
+                    { value: APIType.custom, label: t(`${i18nPrefix}.custom`) },
                   ]}
                   value={tempPayload.config?.type || APIType.basic}
                   onChange={handleAuthAPITypeChange}
                 />
               </Field>
               {tempPayload.config?.type === APIType.custom && (
-                <Field title='header'>
+                <Field title={t(`${i18nPrefix}.header`)}>
                   <input
                     type='text'
                     className='w-full h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
@@ -119,7 +125,7 @@ const Authorization: FC<Props> = ({
                 </Field>
               )}
 
-              <Field title='API Key'>
+              <Field title={t(`${i18nPrefix}.api-key-title`)}>
                 <input
                   type='text'
                   className='w-full h-8 leading-8 px-2.5  rounded-lg border-0 bg-gray-100  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
@@ -131,8 +137,8 @@ const Authorization: FC<Props> = ({
           )}
         </div>
         <div className='mt-6 flex justify-end space-x-2'>
-          <Button onClick={onHide} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>Cancel</Button>
-          <Button type='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>Confirm</Button>
+          <Button onClick={onHide} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.cancel')}</Button>
+          <Button type='primary' onClick={handleConfirm} className='flex items-center !h-8 leading-[18px] !text-[13px] !font-medium'>{t('common.operation.save')}</Button>
         </div>
       </div>
     </Modal>
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 073f8a3a28..f6f29c5f8d 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -11,6 +11,7 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 const i18nPrefix = 'workflow.nodes.http'
 
 const Panel: FC = () => {
@@ -60,9 +61,13 @@ const Panel: FC = () => {
           operations={
             <div
               onClick={showAuthorization}
-              className='flex '
+              className='flex items-center h-6 space-x-1 cursor-pointer'
             >
-              API-KEY
+              <Settings01 className='w-3 h-3 text-gray-500' />
+              <div className='text-xs font-medium text-gray-500'>
+                {t(`${i18nPrefix}.authorization.authorization`)}
+                <span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
+              </div>
             </div>
           }
         >
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 4cada7f7b8..23c6f912af 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -61,6 +61,18 @@ const translation = {
         statusCode: 'Response Status Code',
         headers: 'Response Header List JSON',
       },
+      authorization: {
+        'authorization': 'Authorization',
+        'authorizationType': 'Authorization Type',
+        'no-auth': 'None',
+        'api-key': 'API-Key',
+        'auth-type': 'Auth Type',
+        'basic': 'Basic',
+        'bearer': 'Bearer',
+        'custom': 'Custom',
+        'api-key-title': 'API Key',
+        'header': 'Header',
+      },
     },
     code: {
       inputVars: 'Input Variables',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 61d4b9a1fc..6430b4997a 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -60,6 +60,18 @@ const translation = {
         statusCode: '响应状态码',
         headers: '响应头列表 JSON',
       },
+      authorization: {
+        'authorization': '鉴权',
+        'authorizationType': '鉴权类型',
+        'no-auth': '无',
+        'api-key': 'API-Key',
+        'auth-type': 'API 鉴权类型',
+        'basic': '基础',
+        'bearer': 'Bearer',
+        'custom': '自定义',
+        'api-key-title': 'API Key',
+        'header': 'Header',
+      },
     },
     code: {
       inputVars: '输入变量',