diff --git a/apps/dashboard/src/components/workflow-editor/nodes.tsx b/apps/dashboard/src/components/workflow-editor/nodes.tsx
index 30279f9b9f5..a93228d0b9d 100644
--- a/apps/dashboard/src/components/workflow-editor/nodes.tsx
+++ b/apps/dashboard/src/components/workflow-editor/nodes.tsx
@@ -167,17 +167,19 @@ export const DelayNode = (props: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.DELAY];
 
   return (
-    <StepNode data={data}>
-      <NodeHeader type={StepTypeEnum.DELAY}>
-        <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.DELAY]}>
-          <Icon />
-        </NodeIcon>
-        <NodeName>{data.name || 'Delay Step'}</NodeName>
-      </NodeHeader>
-      <NodeBody>{data.content || 'You have been invited to the Novu party on "commentSnippet"'}</NodeBody>
-      <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
-      <Handle isConnectable={false} className={handleClassName} type="source" position={Position.Bottom} id="b" />
-    </StepNode>
+    <Link to={buildRoute(ROUTES.CONFIGURE_STEP, { stepSlug: data.stepSlug ?? '' })}>
+      <StepNode data={data}>
+        <NodeHeader type={StepTypeEnum.DELAY}>
+          <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.DELAY]}>
+            <Icon />
+          </NodeIcon>
+          <NodeName>{data.name || 'Delay Step'}</NodeName>
+        </NodeHeader>
+        <NodeBody>{data.content || 'You have been invited to the Novu party on "commentSnippet"'}</NodeBody>
+        <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
+        <Handle isConnectable={false} className={handleClassName} type="source" position={Position.Bottom} id="b" />
+      </StepNode>
+    </Link>
   );
 };
 
@@ -186,19 +188,21 @@ export const DigestNode = (props: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.DIGEST];
 
   return (
-    <StepNode data={data}>
-      <NodeHeader type={StepTypeEnum.DIGEST}>
-        <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.DIGEST]}>
-          <Icon />
-        </NodeIcon>
-        <NodeName>{data.name || 'Digest Step'}</NodeName>
-      </NodeHeader>
-      <NodeBody>
-        {data.content || 'Batches events into one coherent message before delivery to the subscriber.'}
-      </NodeBody>
-      <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
-      <Handle isConnectable={false} className={handleClassName} type="source" position={Position.Bottom} id="b" />
-    </StepNode>
+    <Link to={buildRoute(ROUTES.CONFIGURE_STEP, { stepSlug: data.stepSlug ?? '' })}>
+      <StepNode data={data}>
+        <NodeHeader type={StepTypeEnum.DIGEST}>
+          <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.DIGEST]}>
+            <Icon />
+          </NodeIcon>
+          <NodeName>{data.name || 'Digest Step'}</NodeName>
+        </NodeHeader>
+        <NodeBody>
+          {data.content || 'Batches events into one coherent message before delivery to the subscriber.'}
+        </NodeBody>
+        <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
+        <Handle isConnectable={false} className={handleClassName} type="source" position={Position.Bottom} id="b" />
+      </StepNode>
+    </Link>
   );
 };
 
@@ -207,17 +211,19 @@ export const CustomNode = (props: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.CUSTOM];
 
   return (
-    <StepNode data={data}>
-      <NodeHeader type={StepTypeEnum.CUSTOM}>
-        <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.CUSTOM]}>
-          <Icon />
-        </NodeIcon>
-        <NodeName>{data.name || 'Custom Step'}</NodeName>
-      </NodeHeader>
-      <NodeBody>Executes the business logic in your bridge application</NodeBody>
-      <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
-      <Handle isConnectable={false} className={handleClassName} type="source" position={Position.Bottom} id="b" />
-    </StepNode>
+    <Link to={buildRoute(ROUTES.CONFIGURE_STEP, { stepSlug: data.stepSlug ?? '' })}>
+      <StepNode data={data}>
+        <NodeHeader type={StepTypeEnum.CUSTOM}>
+          <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.CUSTOM]}>
+            <Icon />
+          </NodeIcon>
+          <NodeName>{data.name || 'Custom Step'}</NodeName>
+        </NodeHeader>
+        <NodeBody>Executes the business logic in your bridge application</NodeBody>
+        <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
+        <Handle isConnectable={false} className={handleClassName} type="source" position={Position.Bottom} id="b" />
+      </StepNode>
+    </Link>
   );
 };
 
diff --git a/apps/dashboard/src/components/workflow-editor/steps/chat.tsx b/apps/dashboard/src/components/workflow-editor/steps/chat.tsx
deleted file mode 100644
index c49dba1c96b..00000000000
--- a/apps/dashboard/src/components/workflow-editor/steps/chat.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Separator } from '@/components/primitives/separator';
-import { CommonFields } from './common-fields';
-import { SdkBanner } from './sdk-banner';
-
-export default function Chat() {
-  return (
-    <>
-      <div className="flex flex-col gap-4 p-3">
-        <CommonFields />
-      </div>
-      <Separator />
-      <div className="px-3 py-4">
-        <SdkBanner />
-      </div>
-    </>
-  );
-}
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-other-steps.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-other-steps.tsx
new file mode 100644
index 00000000000..d5a00f5d988
--- /dev/null
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-other-steps.tsx
@@ -0,0 +1,38 @@
+/**
+ * This component is used as a placeholder for the other step configuration until the actual configuration is implemented.
+ */
+import { Separator } from '@/components/primitives/separator';
+import { CommonFields } from './common-fields';
+import { SdkBanner } from './sdk-banner';
+import { Link } from 'react-router-dom';
+import { Button } from '@/components/primitives/button';
+import { RiArrowRightSLine, RiPencilRuler2Fill } from 'react-icons/ri';
+
+export default function ConfigureOtherSteps({ channelName }: { channelName?: string }) {
+  return (
+    <>
+      <div className="flex flex-col gap-4 p-3">
+        <CommonFields />
+      </div>
+      <Separator />
+
+      {channelName && (
+        <>
+          <div className="flex flex-col gap-4 p-3">
+            <Link to={'./edit'} relative="path">
+              <Button variant="outline" className="flex w-full justify-start gap-1.5 text-xs font-medium" type="button">
+                <RiPencilRuler2Fill className="h-4 w-4 text-neutral-600" />
+                Configure {channelName} template <RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
+              </Button>
+            </Link>
+          </div>
+          <Separator />
+        </>
+      )}
+
+      <div className="px-3 py-4">
+        <SdkBanner />
+      </div>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
index 64393aae649..ebb1e71acab 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
@@ -10,7 +10,7 @@ import { buildRoute, ROUTES } from '@/utils/routes';
 import { motion } from 'framer-motion';
 import { ConfigureInApp } from './in-app/configure-in-app';
 import { useStep } from './use-step';
-import Chat from './chat';
+import ConfigureOtherSteps from './configure-other-steps';
 import { useState } from 'react';
 import { ConfirmationModal } from '@/components/confirmation-modal';
 
@@ -104,11 +104,23 @@ const Step = ({ stepType }: { stepType?: StepTypeEnum }) => {
     case StepTypeEnum.IN_APP:
       return <ConfigureInApp />;
 
+    case StepTypeEnum.EMAIL:
+      return <ConfigureOtherSteps channelName="email" />;
+
+    case StepTypeEnum.SMS:
+      return <ConfigureOtherSteps channelName="sms" />;
+
+    case StepTypeEnum.PUSH:
+      return <ConfigureOtherSteps channelName="push" />;
+
+    case StepTypeEnum.CHAT:
+      return <ConfigureOtherSteps channelName="chat" />;
+
     /**
      * TODO: Add other step types here
      * For now, it is just a placeholder with the use sdk banner
      */
     default:
-      return <Chat />;
+      return <ConfigureOtherSteps />;
   }
 };
diff --git a/apps/dashboard/src/components/workflow-editor/steps/controls/custom-step-controls.tsx b/apps/dashboard/src/components/workflow-editor/steps/controls/custom-step-controls.tsx
index 9000a3d5b92..61456a675ea 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/controls/custom-step-controls.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/controls/custom-step-controls.tsx
@@ -4,11 +4,18 @@ import { RiArrowDownSLine, RiArrowUpSLine, RiInputField } from 'react-icons/ri';
 import { type ControlsMetadata } from '@novu/shared';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/primitives/collapsible';
 import { JsonForm } from './json-form';
+import { WorkflowOriginEnum } from '@/utils/enums';
 
-export function CustomStepControls({ dataSchema }: { dataSchema: ControlsMetadata['dataSchema'] }) {
+export function CustomStepControls({
+  dataSchema,
+  origin,
+}: {
+  dataSchema: ControlsMetadata['dataSchema'];
+  origin: WorkflowOriginEnum;
+}) {
   const [isEditorOpen, setIsEditorOpen] = useState(true);
 
-  if (!dataSchema) {
+  if (!dataSchema || origin !== WorkflowOriginEnum.EXTERNAL) {
     return null;
   }
 
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx
index 9eff060ef0f..d8584f31c01 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-body.tsx
@@ -42,6 +42,7 @@ export const InAppBody = () => {
                 ]}
                 value={field.value}
                 onChange={(val) => field.onChange(val)}
+                height="100%"
               />
             </InputField>
           </FormControl>
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx
index 6537dc11c6e..e4e2712a883 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/in-app/in-app-tabs.tsx
@@ -156,7 +156,7 @@ export const InAppTabs = ({ workflow, step }: { workflow: WorkflowResponseDto; s
           <Separator />
           <TabsContent value="editor" className={tabsContentClassName}>
             <InAppEditor uiSchema={uiSchema} />
-            <CustomStepControls dataSchema={dataSchema} />
+            <CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
           </TabsContent>
           <TabsContent value="preview" className={tabsContentClassName}>
             <InAppEditorPreview
diff --git a/apps/dashboard/src/components/workflow-editor/steps/other-steps-tabs.tsx b/apps/dashboard/src/components/workflow-editor/steps/other-steps-tabs.tsx
new file mode 100644
index 00000000000..dd140f089c4
--- /dev/null
+++ b/apps/dashboard/src/components/workflow-editor/steps/other-steps-tabs.tsx
@@ -0,0 +1,141 @@
+/**
+ * This component is used as a placeholder for the other step configuration until the actual configuration is implemented.
+ */
+import { zodResolver } from '@hookform/resolvers/zod';
+import { type StepDataDto, type WorkflowResponseDto } from '@novu/shared';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { useForm } from 'react-hook-form';
+import { RiEdit2Line, RiPencilRuler2Line } from 'react-icons/ri';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { Notification5Fill } from '@/components/icons';
+import { Button } from '@/components/primitives/button';
+import { Form } from '@/components/primitives/form/form';
+import { Separator } from '@/components/primitives/separator';
+import { ToastIcon } from '@/components/primitives/sonner';
+import { showToast } from '@/components/primitives/sonner-helpers';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/primitives/tabs';
+import { useUpdateWorkflow } from '@/hooks/use-update-workflow';
+import { buildDefaultValues, buildDynamicZodSchema } from '@/utils/schema';
+import { CustomStepControls } from './controls/custom-step-controls';
+
+const tabsContentClassName = 'h-full w-full px-3 py-3.5';
+
+export const OtherStepTabs = ({ workflow, step }: { workflow: WorkflowResponseDto; step: StepDataDto }) => {
+  const { stepSlug = '' } = useParams<{ workflowSlug: string; stepSlug: string }>();
+  const { dataSchema, uiSchema } = step.controls;
+  const navigate = useNavigate();
+  const schema = buildDynamicZodSchema(dataSchema ?? {});
+  const form = useForm({
+    mode: 'onSubmit',
+    resolver: zodResolver(schema),
+    resetOptions: { keepDirtyValues: true },
+    defaultValues: buildDefaultValues(uiSchema ?? {}),
+    values: step.controls.values,
+  });
+
+  const { reset, formState } = form;
+
+  const { updateWorkflow } = useUpdateWorkflow({
+    onSuccess: () => {
+      showToast({
+        children: () => (
+          <>
+            <ToastIcon variant="success" />
+            <span className="text-sm">Saved</span>
+          </>
+        ),
+        options: {
+          position: 'bottom-right',
+          classNames: {
+            toast: 'ml-10 mb-4',
+          },
+        },
+      });
+    },
+    onError: () => {
+      showToast({
+        children: () => (
+          <>
+            <ToastIcon variant="error" />
+            <span className="text-sm">Failed to save</span>
+          </>
+        ),
+        options: {
+          position: 'bottom-right',
+          classNames: {
+            toast: 'ml-10 mb-4',
+          },
+        },
+      });
+    },
+  });
+
+  const onSubmit = async (data: any) => {
+    await updateWorkflow({
+      id: workflow._id,
+      workflow: {
+        ...workflow,
+        steps: workflow.steps.map((step) => (step.slug === stepSlug ? { ...step, controlValues: { ...data } } : step)),
+      },
+    });
+    reset({ ...data });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        id="save-step"
+        className="flex h-full flex-col"
+        onSubmit={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          form.handleSubmit(onSubmit)(event);
+        }}
+      >
+        <Tabs defaultValue="editor" className="flex h-full flex-1 flex-col">
+          <header className="flex flex-row items-center gap-3 px-3 py-1.5">
+            <div className="mr-auto flex items-center gap-2.5 text-sm font-medium">
+              <RiEdit2Line className="size-4" />
+              <span>Configure Template</span>
+            </div>
+            <TabsList className="w-min">
+              <TabsTrigger value="editor" className="gap-1.5">
+                <RiPencilRuler2Line className="size-5 p-0.5" />
+                <span>Editor</span>
+              </TabsTrigger>
+              <TabsTrigger value="preview" className="gap-1.5" disabled>
+                <Notification5Fill className="size-5 p-0.5" />
+                <span>Preview</span>
+              </TabsTrigger>
+            </TabsList>
+
+            <Button
+              variant="ghost"
+              size="xs"
+              className="size-6"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                navigate('../', { relative: 'path' });
+              }}
+            >
+              <Cross2Icon className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </header>
+          <Separator />
+          <TabsContent value="editor" className={tabsContentClassName}>
+            <CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
+          </TabsContent>
+          <Separator />
+          <footer className="flex justify-end px-3 py-3.5">
+            <Button className="ml-auto" variant="default" type="submit" form="save-step" disabled={!formState.isDirty}>
+              Save step
+            </Button>
+          </footer>
+        </Tabs>
+      </form>
+    </Form>
+  );
+};
diff --git a/apps/dashboard/src/components/workflow-editor/steps/step-editor.tsx b/apps/dashboard/src/components/workflow-editor/steps/step-editor.tsx
index b6dda55c497..cfd892c729f 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/step-editor.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/step-editor.tsx
@@ -1,15 +1,16 @@
 import { type StepDataDto, StepTypeEnum, type WorkflowResponseDto } from '@novu/shared';
 import { InAppTabs } from '@/components/workflow-editor/steps/in-app/in-app-tabs';
+import { OtherStepTabs } from './other-steps-tabs';
 
 const STEP_TYPE_TO_EDITOR: Record<
   StepTypeEnum,
   (args: { workflow: WorkflowResponseDto; step: StepDataDto }) => React.JSX.Element
 > = {
-  [StepTypeEnum.EMAIL]: () => <div>EMAIL Editor</div>,
-  [StepTypeEnum.CHAT]: () => <div>CHAT Editor</div>,
+  [StepTypeEnum.EMAIL]: OtherStepTabs,
+  [StepTypeEnum.CHAT]: OtherStepTabs,
   [StepTypeEnum.IN_APP]: InAppTabs,
-  [StepTypeEnum.SMS]: () => <div>SMS Editor</div>,
-  [StepTypeEnum.PUSH]: () => <div>PUSH Editor</div>,
+  [StepTypeEnum.SMS]: OtherStepTabs,
+  [StepTypeEnum.PUSH]: OtherStepTabs,
   [StepTypeEnum.DIGEST]: () => <div>DIGEST Editor</div>,
   [StepTypeEnum.DELAY]: () => <div>DELAY Editor</div>,
   [StepTypeEnum.TRIGGER]: () => <div>TRIGGER Editor</div>,