diff --git a/apps/web/src/pages/templates/components/StepEditorSidebar.tsx b/apps/web/src/pages/templates/components/StepEditorSidebar.tsx
index a517aebad66..1b9bb05402d 100644
--- a/apps/web/src/pages/templates/components/StepEditorSidebar.tsx
+++ b/apps/web/src/pages/templates/components/StepEditorSidebar.tsx
@@ -1,14 +1,17 @@
+import { Sidebar } from '@novu/design-system';
+import { StepTypeEnum } from '@novu/shared';
 import { ReactNode } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { StepTypeEnum } from '@novu/shared';
-import { Sidebar } from '@novu/design-system';
 
-import { useStepIndex } from '../hooks/useStepIndex';
-import { StepName } from './StepName';
+import { useFormContext } from 'react-hook-form';
 import { useBasePath } from '../hooks/useBasePath';
-import { EditorSidebarHeaderActions } from './EditorSidebarHeaderActions';
-import { useStepVariantsCount } from '../hooks/useStepVariantsCount';
 import { useNavigateToVariantPreview } from '../hooks/useNavigateToVariantPreview';
+import { useStepIndex } from '../hooks/useStepIndex';
+import { useStepVariantsCount } from '../hooks/useStepVariantsCount';
+import { EditorSidebarHeaderActions } from './EditorSidebarHeaderActions';
+import { IForm } from './formTypes';
+import { StepName } from './StepName';
+import { useTemplateEditorForm } from './TemplateEditorFormProvider';
 
 const StepSidebarHeader = () => {
   const { channel } = useParams<{
@@ -35,6 +38,9 @@ export const StepEditorSidebar = ({ children }: { children: ReactNode }) => {
   const navigate = useNavigate();
   const basePath = useBasePath();
   const { navigateToVariantPreview } = useNavigateToVariantPreview();
+  const { onSubmit, onInvalid } = useTemplateEditorForm();
+  const methods = useFormContext<IForm>();
+  const { handleSubmit } = methods;
   const { stepIndex, variantIndex } = useStepIndex();
   const { variantsCount } = useStepVariantsCount();
   const key = `${stepIndex}_${variantIndex}`;
@@ -46,6 +52,10 @@ export const StepEditorSidebar = ({ children }: { children: ReactNode }) => {
     StepTypeEnum.PUSH,
   ].includes(channel as StepTypeEnum);
 
+  const onSubmitHandler = async (data: IForm) => {
+    await onSubmit(data);
+  };
+
   return (
     <Sidebar
       key={key}
@@ -62,6 +72,7 @@ export const StepEditorSidebar = ({ children }: { children: ReactNode }) => {
         navigate(basePath);
       }}
       data-test-id="step-editor-sidebar"
+      onSubmit={handleSubmit(onSubmitHandler, onInvalid)}
     >
       {children}
     </Sidebar>