diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index a0cb8f1c3b..bd8ef8f23a 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -32,7 +32,7 @@ const allMockData = {
   [BlockEnum.End]: EndNodeMock,
 }
 const nodes = [
-  BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
+  BlockEnum.LLM/* 3 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
   BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
   BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */,
 ].map((item, i) => {
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index b4337ea407..19371d6116 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -7,6 +7,7 @@ import type { PromptItem } from '../../../types'
 import { PromptRole } from '../../../types'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
+import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
 
 const i18nPrefix = 'workflow.nodes.llm'
 
@@ -36,6 +37,26 @@ const ConfigPrompt: FC<Props> = ({
     }
   }, [onChange, payload])
 
+  const roleOptions = [
+    {
+      label: 'user',
+      value: PromptRole.user,
+    },
+    {
+      label: 'system',
+      value: PromptRole.system,
+    },
+  ]
+
+  const handleChatModeMessageRoleChange = useCallback((index: number) => {
+    return (role: PromptRole) => {
+      const newPrompt = produce(payload as PromptItem[], (draft) => {
+        draft[index].role = role
+      })
+      onChange(newPrompt)
+    }
+  }, [onChange, payload])
+
   const handleAddPrompt = useCallback(() => {
     const newPrompt = produce(payload as PromptItem[], (draft) => {
       const isLastItemUser = draft[draft.length - 1].role === PromptRole.user
@@ -71,7 +92,15 @@ const ConfigPrompt: FC<Props> = ({
                   return (
                     <Editor
                       key={index}
-                      title={item.role === PromptRole.user ? 'User' : 'System'}
+                      title={
+                        <div className='relative left-1'>
+                          <TypeSelector
+                            value={item.role as string}
+                            options={roleOptions}
+                            onChange={handleChatModeMessageRoleChange(index)}
+                          />
+                        </div>
+                      }
                       value={item.text}
                       onChange={handleChatModePromptChange(index)}
                       variables={variables}