diff --git a/web/client/api/flow/index.ts b/web/client/api/flow/index.ts
index 7f32ac1d9..67c6462e4 100644
--- a/web/client/api/flow/index.ts
+++ b/web/client/api/flow/index.ts
@@ -35,8 +35,8 @@ export const deleteFlowById = (id: string) => {
   return DELETE<null, null>(`/api/v2/serve/awel/flows/${id}`);
 };
 
-export const getFlowNodes = () => {
-  return GET<null, Array<IFlowNode>>(`/api/v2/serve/awel/nodes`);
+export const getFlowNodes = (tags?: string) => {
+  return GET<{ tags?: string }, Array<IFlowNode>>(`/api/v2/serve/awel/nodes`, { tags });
 };
 
 export const refreshFlowNodeById = (data: IFlowRefreshParams) => {
diff --git a/web/components/flow/add-nodes-sider.tsx b/web/components/flow/add-nodes-sider.tsx
index b5a5f6d3c..b35170916 100644
--- a/web/components/flow/add-nodes-sider.tsx
+++ b/web/components/flow/add-nodes-sider.tsx
@@ -4,7 +4,7 @@ import { IFlowNode } from '@/types/flow';
 import { FLOW_NODES_KEY } from '@/utils';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 import type { CollapseProps } from 'antd';
-import { Badge, Collapse, Input, Layout, Space } from 'antd';
+import { Badge, Collapse, Input, Layout, Space, Tag } from 'antd';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import StaticNodes from './static-nodes';
@@ -41,13 +41,14 @@ const AddNodesSider: React.FC = () => {
   const [resources, setResources] = useState<Array<IFlowNode>>([]);
   const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]);
   const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]);
+  const [isAdvancedMode, setIsAdvancedMode] = useState<boolean>(false);
 
   useEffect(() => {
     getNodes();
   }, []);
 
-  async function getNodes() {
-    const [_, data] = await apiInterceptors(getFlowNodes());
+  async function getNodes(tags?: string) {
+    const [_, data] = await apiInterceptors(getFlowNodes(tags));
     if (data && data.length > 0) {
       localStorage.setItem(FLOW_NODES_KEY, JSON.stringify(data));
       const operatorNodes = data.filter(node => node.flow_type === 'operator');
@@ -166,6 +167,17 @@ const AddNodesSider: React.FC = () => {
     setSearchValue(val);
   }
 
+  function onModeChange() {
+    setIsAdvancedMode(!isAdvancedMode);
+
+    if (!isAdvancedMode) {
+      const tags = JSON.stringify({ order: 'higher-order' });
+      getNodes(tags);
+    } else {
+      getNodes();
+    }
+  }
+
   return (
     <Sider
       className='flex justify-center items-start nodrag bg-[#ffffff80] border-r border-[#d5e5f6] dark:bg-[#ffffff29] dark:border-[#ffffff66]'
@@ -179,9 +191,25 @@ const AddNodesSider: React.FC = () => {
       onCollapse={collapsed => setCollapsed(collapsed)}
     >
       <Space direction='vertical' className='w-[280px] pt-4 px-4 overflow-hidden overflow-y-auto scrollbar-default'>
-        <p className='w-full text-base font-semibold text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] line-clamp-1'>
-          {t('add_node')}
-        </p>
+        <div className='flex justify-between align-middle'>
+          <p className='w-full text-base font-semibold text-[#1c2533] dark:text-[rgba(255,255,255,0.85)] line-clamp-1'>
+            {t('add_node')}
+          </p>
+
+          {isAdvancedMode ? (
+            <Tag color='blue' onClick={onModeChange}>
+              {t('Advanced_Mode')}
+            </Tag>
+          ) : (
+            <Tag color='green' onClick={onModeChange}>
+              {t('Default_Mode')}
+            </Tag>
+          )}
+
+          {/* <Button onClick={onModeChange} shape='round' size='small'>
+            {isAdvancedMode ? t('Advanced_Mode') : t('Default_Mode')}
+          </Button> */}
+        </div>
 
         <Search placeholder='Search node' onSearch={searchNode} allowClear />
 
diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx
index 37449337d..aa0378c2f 100644
--- a/web/components/flow/canvas-node.tsx
+++ b/web/components/flow/canvas-node.tsx
@@ -142,7 +142,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
       return (
         <div className='bg-zinc-100 dark:bg-zinc-700 rounded p-2'>
           <TypeLabel label='Outputs' />
-          {(outputs || []).map((output, index) => (
+          {outputs?.map((output, index) => (
             <NodeHandler
               key={`${data.id}_input_${index}`}
               node={data}
diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts
index 4a9ced0c5..43f470423 100644
--- a/web/locales/en/flow.ts
+++ b/web/locales/en/flow.ts
@@ -19,4 +19,6 @@ export const FlowEn = {
   Please_Add_Nodes_First: 'Please add nodes first',
   Add_Global_Variable_of_Flow: 'Add global variable of flow',
   Add_Parameter: 'Add Parameter',
+  Advanced_Mode: 'Advanced Mode',
+  Default_Mode: 'Default Mode',
 };
diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts
index b06216f24..fd04908e8 100644
--- a/web/locales/zh/flow.ts
+++ b/web/locales/zh/flow.ts
@@ -19,4 +19,6 @@ export const FlowZn = {
   Please_Add_Nodes_First: '请先添加节点',
   Add_Global_Variable_of_Flow: '添加 Flow 全局变量',
   Add_Parameter: '添加参数',
+  Advanced_Mode: '高级模式',
+  Default_Mode: '默认模式',
 };