diff --git a/web/src/pages/agent/canvas/node/note-node/index.tsx b/web/src/pages/agent/canvas/node/note-node/index.tsx
index 8ff4c1f24a..5698cdb2b2 100644
--- a/web/src/pages/agent/canvas/node/note-node/index.tsx
+++ b/web/src/pages/agent/canvas/node/note-node/index.tsx
@@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { NodeWrapper } from '../node-wrapper';
 import { ResizeIcon, controlStyle } from '../resize-icon';
+import { ToolBar } from '../toolbar';
 import { useWatchFormChange, useWatchNameFormChange } from './use-watch-change';
 
 const FormSchema = z.object({
@@ -57,28 +58,56 @@ function NoteNode({
   (useWatchNoteNameFormChange || useWatchNameFormChange)(id, nameForm);
 
   return (
-    <NodeWrapper
-      className="p-0  w-full h-full flex flex-col bg-bg-component border border-state-warning rounded-lg shadow-md pb-1"
+    <ToolBar
       selected={selected}
+      id={id}
+      label={data.label}
+      showRun={false}
+      showCopy={false}
     >
-      <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
-        <ResizeIcon />
-      </NodeResizeControl>
-      <section className="px-2 py-1 flex gap-2 items-center note-drag-handle rounded-t border-t-2 border-state-warning">
-        <NotebookPen className="size-4" />
-        <Form {...nameForm}>
-          <form className="flex-1">
+      <NodeWrapper
+        className="p-0  w-full h-full flex flex-col bg-bg-component border border-state-warning rounded-lg shadow-md pb-1"
+        selected={selected}
+      >
+        <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
+          <ResizeIcon />
+        </NodeResizeControl>
+        <section className="px-2 py-1 flex gap-2 items-center note-drag-handle rounded-t border-t-2 border-state-warning">
+          <NotebookPen className="size-4" />
+          <Form {...nameForm}>
+            <form className="flex-1">
+              <FormField
+                control={nameForm.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem className="h-full">
+                    <FormControl>
+                      <Input
+                        placeholder={t('flow.notePlaceholder')}
+                        {...field}
+                        type="text"
+                        className="bg-transparent border-none focus-visible:outline focus-visible:outline-text-sub-title p-1"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </section>
+        <Form {...form}>
+          <form className="flex-1 px-1 min-h-1">
             <FormField
-              control={nameForm.control}
-              name="name"
+              control={form.control}
+              name="text"
               render={({ field }) => (
                 <FormItem className="h-full">
                   <FormControl>
-                    <Input
+                    <Textarea
                       placeholder={t('flow.notePlaceholder')}
+                      className="resize-none rounded-none p-1 py-0 overflow-auto bg-transparent focus-visible:ring-0 border-none text-text-secondary focus-visible:ring-offset-0 !text-xs h-full"
                       {...field}
-                      type="text"
-                      className="bg-transparent border-none focus-visible:outline focus-visible:outline-text-sub-title p-1"
                     />
                   </FormControl>
                   <FormMessage />
@@ -87,28 +116,8 @@ function NoteNode({
             />
           </form>
         </Form>
-      </section>
-      <Form {...form}>
-        <form className="flex-1 px-1 min-h-1">
-          <FormField
-            control={form.control}
-            name="text"
-            render={({ field }) => (
-              <FormItem className="h-full">
-                <FormControl>
-                  <Textarea
-                    placeholder={t('flow.notePlaceholder')}
-                    className="resize-none rounded-none p-1 py-0 overflow-auto bg-transparent focus-visible:ring-0 border-none text-text-secondary focus-visible:ring-offset-0 !text-xs h-full"
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </form>
-      </Form>
-    </NodeWrapper>
+      </NodeWrapper>
+    </ToolBar>
   );
 }
 
diff --git a/web/src/pages/user-setting/compilation-templates/edit-next/index.tsx b/web/src/pages/user-setting/compilation-templates/edit-next/index.tsx
index 940a3207d8..3bd7f1573c 100644
--- a/web/src/pages/user-setting/compilation-templates/edit-next/index.tsx
+++ b/web/src/pages/user-setting/compilation-templates/edit-next/index.tsx
@@ -55,7 +55,7 @@ export default function EditNextCompilationTemplate() {
       </header>
 
       <Form {...form}>
-        <form className="flex-1 min-h-0 flex flex-col">
+        <form className="flex-1 min-h-0 flex flex-col" onSubmit={handleSave}>
           <TemplateConfiguration
             form={form}
             builtins={builtins}
@@ -74,7 +74,7 @@ export default function EditNextCompilationTemplate() {
             <Button type="button" variant="outline" onClick={navigateToAgents}>
               {t('common.back')}
             </Button>
-            <Button type="button" loading={isLoading} onClick={handleSave}>
+            <Button type="submit" loading={isLoading}>
               {t('common.save')}
             </Button>
           </footer>