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..d71a12707 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';
@@ -12,6 +12,8 @@ import StaticNodes from './static-nodes';
 const { Search } = Input;
 const { Sider } = Layout;
 
+const TAGS = JSON.stringify({ order: 'higher-order' });
+
 type GroupType = {
   category: string;
   categoryLabel: string;
@@ -41,13 +43,16 @@ const AddNodesSider: React.FC = () => {
   const [resources, setResources] = useState<Array<IFlowNode>>([]);
   const [operatorsGroup, setOperatorsGroup] = useState<GroupType[]>([]);
   const [resourcesGroup, setResourcesGroup] = useState<GroupType[]>([]);
+  const [isAllNodesVisible, setIsAllNodesVisible] = useState<boolean>(false);
 
   useEffect(() => {
-    getNodes();
+    getNodes(TAGS);
   }, []);
 
-  async function getNodes() {
-    const [_, data] = await apiInterceptors(getFlowNodes());
+  // tags is optional, if tags is not passed, it will get all nodes
+  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 +171,16 @@ const AddNodesSider: React.FC = () => {
     setSearchValue(val);
   }
 
+  function onModeChange() {
+    if (isAllNodesVisible) {
+      getNodes(TAGS);
+    } else {
+      getNodes();
+    }
+
+    setIsAllNodesVisible(!isAllNodesVisible);
+  }
+
   return (
     <Sider
       className='flex justify-center items-start nodrag bg-[#ffffff80] border-r border-[#d5e5f6] dark:bg-[#ffffff29] dark:border-[#ffffff66]'
@@ -179,9 +194,15 @@ 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>
+
+          <Tag color={isAllNodesVisible ? 'green' : 'blue'} onClick={onModeChange} className='mr-0'>
+            {isAllNodesVisible ? t('All_Nodes') : t('Higher_Order_Nodes')}
+          </Tag>
+        </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..27b388e74 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',
+  Higher_Order_Nodes: 'Higher Order Nodes',
+  All_Nodes: 'All Nodes',
 };
diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts
index b06216f24..f846059c4 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: '添加参数',
+  Higher_Order_Nodes: '高阶节点',
+  All_Nodes: '所有节点',
 };