diff --git a/apps/dashboard/src/components/primitives/input.tsx b/apps/dashboard/src/components/primitives/input.tsx
index ec02bddc581..598ec92d302 100644
--- a/apps/dashboard/src/components/primitives/input.tsx
+++ b/apps/dashboard/src/components/primitives/input.tsx
@@ -5,11 +5,12 @@ import { cva, VariantProps } from 'class-variance-authority';
 import { inputVariants } from '@/components/primitives/variants';
 
 const inputFieldVariants = cva(
-  'text-foreground-950 flex w-full flex-nowrap items-center gap-1.5 rounded-md border bg-transparent shadow-sm transition-colors focus-within:outline-none focus-visible:outline-none hover:bg-neutral-50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input[value=""]]:text-foreground-400 has-[input:disabled]:bg-neutral-alpha-100 has-[input:disabled]:text-foreground-300',
+  'text-foreground-950 flex w-full flex-nowrap items-center gap-1.5 rounded-md border bg-transparent transition-colors focus-within:outline-none focus-visible:outline-none hover:bg-neutral-50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 has-[input[value=""]]:text-foreground-400 has-[input:disabled]:bg-neutral-alpha-100 has-[input:disabled]:text-foreground-300',
   {
     variants: {
       size: {
         default: 'h-8 px-2 [&>input]:py-1.5',
+        md: 'h-10 px-3 [&>input]:py-2.5',
       },
       state: {
         default:
diff --git a/apps/dashboard/src/components/primitives/tabs.tsx b/apps/dashboard/src/components/primitives/tabs.tsx
index f194a5d7a61..78570186c44 100644
--- a/apps/dashboard/src/components/primitives/tabs.tsx
+++ b/apps/dashboard/src/components/primitives/tabs.tsx
@@ -2,43 +2,76 @@ import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 import { cn } from '@/utils/ui';
+import { cva, VariantProps } from 'class-variance-authority';
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'border-neutral-alpha-200 inline-flex w-full items-center justify-start gap-6 border-b border-t px-3.5',
-      className
-    )}
-    {...props}
-  />
-));
+const tabsListVariants = cva('inline-flex items-center', {
+  variants: {
+    variant: {
+      default: 'h-9 justify-center rounded-[10px] bg-neutral-alpha-100 p-1 text-muted-foreground',
+      regular: 'border-neutral-alpha-200 w-full justify-start gap-6 border-b border-t px-3.5',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>;
+
+const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
+  ({ className, variant, ...props }, ref) => (
+    <TabsPrimitive.List ref={ref} className={tabsListVariants({ variant, className })} {...props} />
+  )
+);
 TabsList.displayName = TabsPrimitive.List.displayName;
 
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "text-foreground-600 ring-offset-background focus-visible:ring-ring data-[state=active]:text-foreground data-[state=active]:after:border-primary data-[state=active]:text-foreground-950 relative inline-flex items-center justify-center whitespace-nowrap rounded-md py-3.5 text-sm font-medium transition-all duration-300 ease-out after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:border-b-2 after:border-b-transparent after:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className
-    )}
-    {...props}
-  />
-));
+const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-all text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=active]:text-foreground disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'px-3 py-1 data-[state=active]:bg-background data-[state=active]:shadow data-[state=inactive]:text-foreground-400',
+        regular:
+          "text-foreground-600 data-[state=active]:after:border-primary data-[state=active]:text-foreground-950 relative py-3.5 duration-300 ease-out after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:border-b-2 after:border-b-transparent after:content-['']",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> &
+  VariantProps<typeof tabsTriggerVariants>;
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(
+  ({ className, variant, ...props }, ref) => (
+    <TabsPrimitive.Trigger ref={ref} className={tabsTriggerVariants({ variant, className })} {...props} />
+  )
+);
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn('mt-2 focus-visible:outline-none', className)} {...props} />
-));
+const tabsContentVariants = cva('focus-visible:outline-none', {
+  variants: {
+    variant: {
+      default: 'ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      regular: 'mt-2',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> &
+  VariantProps<typeof tabsContentVariants>;
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(
+  ({ className, variant, ...props }, ref) => (
+    <TabsPrimitive.Content ref={ref} className={tabsContentVariants({ variant, className })} {...props} />
+  )
+);
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 const Tabs = React.forwardRef<
diff --git a/apps/dashboard/src/components/primitives/textarea.tsx b/apps/dashboard/src/components/primitives/textarea.tsx
index 072953042d4..c871447948b 100644
--- a/apps/dashboard/src/components/primitives/textarea.tsx
+++ b/apps/dashboard/src/components/primitives/textarea.tsx
@@ -9,6 +9,7 @@ const textareaVariants = cva(
     variants: {
       size: {
         default: 'h-8 px-2 py-1.5',
+        md: 'h-10 px-3 py-2.5',
       },
       state: {
         default:
diff --git a/apps/dashboard/src/components/primitives/url-input.tsx b/apps/dashboard/src/components/primitives/url-input.tsx
index 18c646f812d..ec5976936d3 100644
--- a/apps/dashboard/src/components/primitives/url-input.tsx
+++ b/apps/dashboard/src/components/primitives/url-input.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Input, InputField, InputProps } from '@/components/primitives/input';
+import { Input, InputField, InputFieldProps, InputProps } from '@/components/primitives/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/primitives/select';
 import { RedirectTargetEnum } from '@novu/shared';
 import { forwardRef } from 'react';
@@ -10,19 +10,19 @@ type URLValue = {
   url: string;
 };
 
-type URLInputProps = Omit<InputProps, 'value' | 'onChange'> & {
+type URLInputProps = Omit<InputProps, 'value' | 'onChange' | 'size'> & {
   options: string[];
   value: URLValue;
   onChange: (value: URLValue) => void;
-};
+} & Pick<InputFieldProps, 'size'>;
 
 export const URLInput = forwardRef<HTMLInputElement, URLInputProps>((props, ref) => {
-  const { options, value, onChange, ...rest } = props;
+  const { options, value, onChange, size, ...rest } = props;
 
   return (
     <div className="flex items-center justify-between space-x-2">
       <div className="relative flex-grow">
-        <InputField className="pr-0">
+        <InputField className="pr-0" size={size}>
           <Input
             ref={ref}
             type="text"
@@ -32,7 +32,7 @@ export const URLInput = forwardRef<HTMLInputElement, URLInputProps>((props, ref)
             {...rest}
           />
           <Select value={value.type} onValueChange={(val: RedirectTargetEnum) => onChange({ ...value, type: val })}>
-            <SelectTrigger className="h-full rounded-l-none border-0 border-l">
+            <SelectTrigger className="h-full max-w-24 rounded-l-none border-0 border-l">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
diff --git a/apps/dashboard/src/components/primitives/variants.ts b/apps/dashboard/src/components/primitives/variants.ts
index 14cd6ed8d36..ecfdeab6b90 100644
--- a/apps/dashboard/src/components/primitives/variants.ts
+++ b/apps/dashboard/src/components/primitives/variants.ts
@@ -63,11 +63,11 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          'bg-gradient-to-b from-neutral-alpha-900 to-neutral-900 text-neutral-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--neutral-900)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--neutral-900)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
+          'bg-gradient-to-b from-neutral-alpha-900 to-neutral-900 text-neutral-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--neutral-900)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--neutral-900)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
         primary:
-          'bg-gradient-to-b from-primary/90 to-primary text-primary-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--primary)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--primary)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
+          'bg-gradient-to-b from-primary/90 to-primary text-primary-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--primary)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--primary)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
         destructive:
-          'bg-gradient-to-b from-destructive/90 to-destructive text-destructive-foreground shadow-[inset_0_-4px_2px_-2px_hsl(var(--destructive)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--destructive)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
+          'bg-gradient-to-b from-destructive/90 to-destructive text-destructive-foreground [clip-path:border-box] shadow-[inset_0_-4px_2px_-2px_hsl(var(--destructive)),inset_0_0_0_1px_rgba(255,255,255,0.16),0_0_0_1px_hsl(var(--destructive)),0px_1px_2px_0px_#0E121B3D] after:content-[""] after:absolute after:w-full after:h-full after:bg-gradient-to-b after:from-background/10 after:opacity-0 hover:after:opacity-100 after:rounded-lg after:transition-opacity after:duration-300',
         outline: 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
         dashed: 'border border-dashed border-input bg-background hover:bg-accent text-foreground-600',
         ghost: 'hover:bg-accent',
diff --git a/apps/dashboard/src/components/workflow-editor/action-picker.tsx b/apps/dashboard/src/components/workflow-editor/action-picker.tsx
index 2a976b3e2fc..3ba60478815 100644
--- a/apps/dashboard/src/components/workflow-editor/action-picker.tsx
+++ b/apps/dashboard/src/components/workflow-editor/action-picker.tsx
@@ -12,6 +12,7 @@ import { Separator } from '@/components/primitives/separator';
 import { URLInput } from '@/components/primitives/url-input';
 import { buttonVariants } from '@/components/primitives/variants';
 import { cn } from '@/utils/ui';
+import { urlTargetTypes } from '@/utils/url';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { RedirectTargetEnum } from '@novu/shared';
 import { ComponentProps } from 'react';
@@ -33,18 +34,19 @@ type Actions = {
 };
 
 type ActionPickerProps = {
+  className?: string;
   value: Actions | undefined;
   onChange: (value: Actions) => void;
 };
 
 export const ActionPicker = (props: ActionPickerProps) => {
-  const { value, onChange } = props;
+  const { className, value, onChange } = props;
   const primaryAction = value?.primaryAction;
   const secondaryAction = value?.secondaryAction;
 
   return (
-    <div className="flex items-center gap-1">
-      <div className="border-neutral-alpha-200 flex min-h-10 w-full flex-wrap justify-end gap-1 rounded-md border p-1 shadow-sm">
+    <div className={cn('flex items-center gap-1', className)}>
+      <div className="border-neutral-alpha-200 flex min-h-10 w-full flex-wrap items-center justify-end gap-1 rounded-md border p-1 shadow-sm">
         {!primaryAction && !secondaryAction && (
           <div className={buttonVariants({ variant: 'dashed', size: 'sm' })}>
             <RiForbid2Line className="size-4" />
@@ -59,7 +61,7 @@ export const ActionPicker = (props: ActionPickerProps) => {
               onChange({ primaryAction, secondaryAction });
             }}
           >
-            <Button variant="primary" size="sm">
+            <Button variant="primary" size="xs">
               {primaryAction.label}
             </Button>
           </ConfigureActionPopover>
@@ -72,7 +74,7 @@ export const ActionPicker = (props: ActionPickerProps) => {
               onChange({ primaryAction, secondaryAction });
             }}
           >
-            <Button variant="outline" size="sm">
+            <Button variant="outline" size="xs">
               {secondaryAction.label}
             </Button>
           </ConfigureActionPopover>
@@ -90,7 +92,7 @@ export const ActionPicker = (props: ActionPickerProps) => {
               onChange({});
             }}
           >
-            <div className={cn(buttonVariants({ variant: 'dashed', size: 'sm' }), 'pointer-events-none gap-2')}>
+            <div className={cn(buttonVariants({ variant: 'dashed', size: 'xs' }), 'pointer-events-none gap-2')}>
               <RiForbid2Line className="size-4" />
               No action
             </div>
@@ -106,7 +108,7 @@ export const ActionPicker = (props: ActionPickerProps) => {
               });
             }}
           >
-            <div className={cn(buttonVariants({ variant: 'primary', size: 'sm' }), 'pointer-events-none')}>
+            <div className={cn(buttonVariants({ variant: 'primary', size: 'xs' }), 'pointer-events-none')}>
               Primary action
             </div>
           </DropdownMenuItem>
@@ -124,10 +126,10 @@ export const ActionPicker = (props: ActionPickerProps) => {
               });
             }}
           >
-            <div className={cn(buttonVariants({ variant: 'primary', size: 'sm' }), 'pointer-events-none')}>
+            <div className={cn(buttonVariants({ variant: 'primary', size: 'xs' }), 'pointer-events-none')}>
               Primary action
             </div>
-            <div className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'pointer-events-none')}>
+            <div className={cn(buttonVariants({ variant: 'outline', size: 'xs' }), 'pointer-events-none')}>
               Secondary action
             </div>
           </DropdownMenuItem>
@@ -151,14 +153,6 @@ const formSchema = z.object({
   }),
 });
 
-const urlTypes = [
-  RedirectTargetEnum.SELF,
-  RedirectTargetEnum.BLANK,
-  RedirectTargetEnum.PARENT,
-  RedirectTargetEnum.TOP,
-  RedirectTargetEnum.UNFENCED_TOP,
-];
-
 const ConfigureActionPopover = (
   props: ComponentProps<typeof PopoverTrigger> & { action: Action; setAction: (action: Action) => void }
 ) => {
@@ -221,7 +215,7 @@ const ConfigureActionPopover = (
                     <FormControl>
                       <URLInput
                         {...field}
-                        options={urlTypes}
+                        options={urlTargetTypes}
                         value={field.value}
                         onChange={(val) => field.onChange(val)}
                       />
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 023ad9da968..6f1ef3712c2 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
@@ -56,7 +56,7 @@ export function ConfigureStep() {
 }
 
 const Step = () => {
-  const { channel } = useStep();
+  const { stepType: channel } = useStep();
   switch (channel) {
     case StepTypeEnum.IN_APP:
       return <InApp />;
diff --git a/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx b/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx
index a6fb8595664..ca3f1a6896f 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx
@@ -1,28 +1,59 @@
-import { useNavigate } from 'react-router-dom';
-import { RiEdit2Line } from 'react-icons/ri';
+import { useLayoutEffect, useMemo } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
 import { motion } from 'framer-motion';
-import { Button } from '@/components/primitives/button';
-import { Separator } from '@/components/primitives/separator';
-import {
-  Sheet,
-  SheetClose,
-  SheetFooter,
-  SheetHeader,
-  SheetMain,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-} from '@/components/primitives/sheet';
-import { Cross2Icon } from '@radix-ui/react-icons';
+import { workflowSchema } from '../schema';
+import { useFetchWorkflow, useUpdateWorkflow } from '@/hooks';
+import { Form } from '@/components/primitives/form/form';
+import { handleValidationIssues } from '@/utils/handleValidationIssues';
+import { Sheet, SheetOverlay, SheetPortal } from '@/components/primitives/sheet';
+import { StepEditor } from './step-editor';
 
 const transitionSetting = { ease: [0.29, 0.83, 0.57, 0.99], duration: 0.4 };
 
-const StepEditor = () => {
-  return <div>Step Editor</div>;
-};
-
 export const EditStepSidebar = () => {
+  const { workflowId = '', stepId = '' } = useParams<{ workflowId: string; stepId: string }>();
   const navigate = useNavigate();
+  const form = useForm<z.infer<typeof workflowSchema>>({ mode: 'onSubmit', resolver: zodResolver(workflowSchema) });
+  const { reset, setError } = form;
+
+  const { workflow, error } = useFetchWorkflow({
+    workflowId,
+  });
+
+  const step = useMemo(() => workflow?.steps.find((el) => el._id === stepId), [stepId, workflow]);
+
+  useLayoutEffect(() => {
+    if (!workflow) {
+      return;
+    }
+
+    reset({ ...workflow, steps: workflow.steps.map((step) => ({ ...step })) });
+  }, [workflow, error, navigate, reset]);
+
+  const { updateWorkflow } = useUpdateWorkflow({
+    onSuccess: (data) => {
+      reset({ ...data, steps: data.steps.map((step) => ({ ...step })) });
+
+      if (data.issues) {
+        // TODO: remove the as any cast when BE issues are typed
+        handleValidationIssues({ fields: form.getValues(), issues: data.issues as any, setError });
+      }
+
+      // TODO: show the toast
+      navigate(`../`, { relative: 'path' });
+    },
+  });
+
+  const onSubmit = (data: z.infer<typeof workflowSchema>) => {
+    if (!workflow) {
+      return;
+    }
+
+    updateWorkflow({ id: workflow._id, workflow: { ...workflow, ...data } as any });
+  };
 
   return (
     <Sheet open>
@@ -56,33 +87,18 @@ export const EditStepSidebar = () => {
             'bg-background fixed inset-y-0 right-0 z-50 flex h-full w-3/4 flex-col border-l shadow-lg sm:max-w-[600px]'
           }
         >
-          <SheetClose
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-neutral-alpha-100 absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
-            onClick={() => {
-              navigate('../', { relative: 'path' });
-            }}
-          >
-            <Cross2Icon className="h-4 w-4" />
-            <span className="sr-only">Close</span>
-          </SheetClose>
-          <SheetHeader className="px-3 py-3.5">
-            <SheetTitle>
-              <div className="flex items-center gap-2.5 text-sm font-medium">
-                <RiEdit2Line className="size-4" />
-                <span>Configure Template</span>
-              </div>
-            </SheetTitle>
-          </SheetHeader>
-          <Separator />
-          <SheetMain>
-            <StepEditor />
-          </SheetMain>
-          <Separator />
-          <SheetFooter>
-            <Button variant="default" type="submit" form="create-workflow">
-              Save step
-            </Button>
-          </SheetFooter>
+          <Form {...form}>
+            <form
+              className="flex h-full flex-col"
+              onSubmit={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                form.handleSubmit(onSubmit)(event);
+              }}
+            >
+              {step && <StepEditor stepType={step?.type} />}
+            </form>
+          </Form>
         </motion.div>
       </SheetPortal>
     </Sheet>
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app-editor.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app-editor.tsx
new file mode 100644
index 00000000000..1fbfd331b53
--- /dev/null
+++ b/apps/dashboard/src/components/workflow-editor/steps/in-app-editor.tsx
@@ -0,0 +1,114 @@
+import { RiEdit2Line, RiInformationFill, RiPencilRuler2Line } from 'react-icons/ri';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { useNavigate } from 'react-router-dom';
+import { useFormContext } from 'react-hook-form';
+import * as z from 'zod';
+
+import { Button } from '@/components/primitives/button';
+import { Separator } from '@/components/primitives/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/primitives/tabs';
+import { Notification5Fill } from '@/components/icons';
+import { AvatarPicker } from '@/components/primitives/form/avatar-picker';
+import { Input, InputField } from '@/components/primitives/input';
+import { Textarea } from '@/components/primitives/textarea';
+import { workflowSchema } from '../schema';
+import { ActionPicker } from '../action-picker';
+import { URLInput } from '@/components/primitives/url-input';
+import { urlTargetTypes } from '@/utils/url';
+import { RedirectTargetEnum } from '@novu/shared';
+
+const tabsContentClassName = 'h-full w-full px-3 py-3.5';
+
+export const InAppEditor = () => {
+  const navigate = useNavigate();
+  const { formState } = useFormContext<z.infer<typeof workflowSchema>>();
+
+  return (
+    <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">
+            <Notification5Fill className="size-5 p-0.5" />
+            <span>Preview</span>
+          </TabsTrigger>
+        </TabsList>
+
+        <Button
+          variant="ghost"
+          size="xs"
+          className="size-6"
+          onClick={() => {
+            navigate('../', { relative: 'path' });
+          }}
+        >
+          <Cross2Icon className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </Button>
+      </header>
+      <Separator />
+      <TabsContent value="editor" className={tabsContentClassName}>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-2.5">
+            <RiPencilRuler2Line className="text-foreground-950 size-5 p-0.5 text-sm font-medium" />
+            <span>In-app Template</span>
+          </div>
+          <div className="flex flex-col gap-1 rounded-xl border border-neutral-100 p-1">
+            <div className="flex gap-1">
+              <AvatarPicker />
+              <InputField size="md">
+                <Input type="text" name="subject" placeholder="Subject" />
+              </InputField>
+            </div>
+            <Textarea placeholder="Body" className="h-24" />
+            <div className="mt-1 flex items-center gap-1">
+              <RiInformationFill className="text-foreground-400 size-4 p-0.5" />
+              <span className="text-foreground-600 text-xs font-normal">
+                {'This supports markdown and variables, type { for more.'}
+              </span>
+            </div>
+            <ActionPicker
+              value={{
+                primaryAction: { label: 'Primary', redirect: { url: '', type: RedirectTargetEnum.BLANK } },
+                secondaryAction: { label: 'Secondary', redirect: { url: '', type: RedirectTargetEnum.BLANK } },
+              }}
+              onChange={() => {}}
+              className="mt-3"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label>Redirect URL</label>
+            <URLInput
+              options={urlTargetTypes}
+              value={{ type: RedirectTargetEnum.BLANK, url: '' }}
+              onChange={(val) => console.log(val)}
+              size="md"
+            />
+          </div>
+        </div>
+      </TabsContent>
+      <TabsContent value="preview" className={tabsContentClassName}>
+        <div>Preview</div>
+      </TabsContent>
+      <Separator />
+      <footer className="flex justify-end px-3 py-3.5">
+        <Button
+          className="ml-auto"
+          variant="default"
+          type="submit"
+          form="create-workflow"
+          disabled={!formState.isDirty}
+        >
+          Save step
+        </Button>
+      </footer>
+    </Tabs>
+  );
+};
diff --git a/apps/dashboard/src/components/workflow-editor/steps/step-editor.tsx b/apps/dashboard/src/components/workflow-editor/steps/step-editor.tsx
new file mode 100644
index 00000000000..6909c8599a8
--- /dev/null
+++ b/apps/dashboard/src/components/workflow-editor/steps/step-editor.tsx
@@ -0,0 +1,19 @@
+import { StepTypeEnum } from '@novu/shared';
+import { InAppEditor } from './in-app-editor';
+
+const STEP_TYPE_TO_EDITOR: Record<StepTypeEnum, () => React.JSX.Element> = {
+  [StepTypeEnum.EMAIL]: () => <div>EMAIL Editor</div>,
+  [StepTypeEnum.CHAT]: () => <div>CHAT Editor</div>,
+  [StepTypeEnum.IN_APP]: InAppEditor,
+  [StepTypeEnum.SMS]: () => <div>SMS Editor</div>,
+  [StepTypeEnum.PUSH]: () => <div>PUSH Editor</div>,
+  [StepTypeEnum.DIGEST]: () => <div>DIGEST Editor</div>,
+  [StepTypeEnum.DELAY]: () => <div>DELAY Editor</div>,
+  [StepTypeEnum.TRIGGER]: () => <div>TRIGGER Editor</div>,
+  [StepTypeEnum.CUSTOM]: () => <div>CUSTOM Editor</div>,
+};
+
+export const StepEditor = ({ stepType }: { stepType: StepTypeEnum }) => {
+  const Editor = STEP_TYPE_TO_EDITOR[stepType];
+  return <Editor />;
+};
diff --git a/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx b/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx
index 5184b44bb3c..519ea92d017 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx
@@ -20,6 +20,6 @@ export const useStep = () => {
     step,
     stepIndex,
     control,
-    channel: step?.type,
+    stepType: step?.type,
   };
 };
diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx
index cf1542dcf62..1f9f607cdb4 100644
--- a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx
+++ b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-form.tsx
@@ -127,23 +127,23 @@ export const TestWorkflowForm = ({ workflow }: { workflow?: WorkflowResponseDto
             value={activeSnippetTab}
             onValueChange={(value) => setActiveSnippetTab(value as SnippetLanguage)}
           >
-            <TabsList className="border-t-0">
-              <TabsTrigger className={tabsTriggerClassName} value="framework">
+            <TabsList className="border-t-0" variant="regular">
+              <TabsTrigger className={tabsTriggerClassName} value="framework" variant="regular">
                 Framework
               </TabsTrigger>
-              <TabsTrigger className={tabsTriggerClassName} value="shell">
+              <TabsTrigger className={tabsTriggerClassName} value="shell" variant="regular">
                 cURL
               </TabsTrigger>
-              <TabsTrigger className={tabsTriggerClassName} value="typescript">
+              <TabsTrigger className={tabsTriggerClassName} value="typescript" variant="regular">
                 NodeJS
               </TabsTrigger>
-              <TabsTrigger className={tabsTriggerClassName} value="php">
+              <TabsTrigger className={tabsTriggerClassName} value="php" variant="regular">
                 PHP
               </TabsTrigger>
-              <TabsTrigger className={tabsTriggerClassName} value="go">
+              <TabsTrigger className={tabsTriggerClassName} value="go" variant="regular">
                 Golang
               </TabsTrigger>
-              <TabsTrigger className={tabsTriggerClassName} value="python">
+              <TabsTrigger className={tabsTriggerClassName} value="python" variant="regular">
                 Python
               </TabsTrigger>
               <CopyButton
@@ -154,22 +154,22 @@ export const TestWorkflowForm = ({ workflow }: { workflow?: WorkflowResponseDto
                 value="Copy code"
               />
             </TabsList>
-            <TabsContent value="framework" className={codePanelClassName}>
+            <TabsContent value="framework" className={codePanelClassName} variant="regular">
               <SnippetEditor language="framework" value={snippetValue} />
             </TabsContent>
-            <TabsContent value="shell" className={codePanelClassName}>
+            <TabsContent value="shell" className={codePanelClassName} variant="regular">
               <SnippetEditor language="shell" value={snippetValue} />
             </TabsContent>
-            <TabsContent value="typescript" className={codePanelClassName}>
+            <TabsContent value="typescript" className={codePanelClassName} variant="regular">
               <SnippetEditor language="typescript" value={snippetValue} />
             </TabsContent>
-            <TabsContent value="php" className={codePanelClassName}>
+            <TabsContent value="php" className={codePanelClassName} variant="regular">
               <SnippetEditor language="php" value={snippetValue} />
             </TabsContent>
-            <TabsContent value="go" className={codePanelClassName}>
+            <TabsContent value="go" className={codePanelClassName} variant="regular">
               <SnippetEditor language="go" value={snippetValue} />
             </TabsContent>
-            <TabsContent value="python" className={codePanelClassName}>
+            <TabsContent value="python" className={codePanelClassName} variant="regular">
               <SnippetEditor language="python" value={snippetValue} />
             </TabsContent>
           </Tabs>
diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
index 8a1bad94b93..0a6ae84322d 100644
--- a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
+++ b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-tabs.tsx
@@ -80,8 +80,8 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
       <Form {...form}>
         <form onSubmit={handleSubmit(onSubmit)} className="roun flex h-full flex-1 flex-nowrap">
           <Tabs defaultValue="workflow" className="-mt-[1px] flex h-full flex-1 flex-col" value="trigger">
-            <TabsList>
-              <TabsTrigger value="workflow" asChild>
+            <TabsList variant="regular">
+              <TabsTrigger value="workflow" asChild variant="regular">
                 <Link
                   to={buildRoute(ROUTES.EDIT_WORKFLOW, {
                     environmentId,
@@ -91,7 +91,7 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
                   Workflow
                 </Link>
               </TabsTrigger>
-              <TabsTrigger value="trigger" asChild>
+              <TabsTrigger value="trigger" asChild variant="regular">
                 <Link
                   to={buildRoute(ROUTES.TEST_WORKFLOW, {
                     environmentId,
@@ -108,7 +108,7 @@ export const TestWorkflowTabs = ({ testData }: { testData: WorkflowTestDataRespo
                 </Button>
               </div>
             </TabsList>
-            <TabsContent value="trigger" className="mt-0 h-full w-full">
+            <TabsContent value="trigger" className="mt-0 h-full w-full" variant="regular">
               <TestWorkflowForm workflow={workflow} />
             </TabsContent>
           </Tabs>
diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx
index df77c2e3e77..4bc5bb7d9af 100644
--- a/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx
+++ b/apps/dashboard/src/components/workflow-editor/workflow-editor.tsx
@@ -18,8 +18,8 @@ export const WorkflowEditor = () => {
   return (
     <div className="flex h-full flex-1 flex-nowrap">
       <Tabs defaultValue="workflow" className="-mt-[1px] flex h-full flex-1 flex-col" value="workflow">
-        <TabsList>
-          <TabsTrigger value="workflow" asChild>
+        <TabsList variant="regular">
+          <TabsTrigger value="workflow" asChild variant="regular">
             <Link
               to={buildRoute(ROUTES.EDIT_WORKFLOW, {
                 environmentId,
@@ -29,7 +29,7 @@ export const WorkflowEditor = () => {
               Workflow
             </Link>
           </TabsTrigger>
-          <TabsTrigger value="trigger" asChild>
+          <TabsTrigger value="trigger" asChild variant="regular">
             <Link
               to={buildRoute(ROUTES.TEST_WORKFLOW, {
                 environmentId,
@@ -40,7 +40,7 @@ export const WorkflowEditor = () => {
             </Link>
           </TabsTrigger>
         </TabsList>
-        <TabsContent value="workflow" className="mt-0 h-full w-full">
+        <TabsContent value="workflow" className="mt-0 h-full w-full" variant="regular">
           {steps && <WorkflowCanvas steps={steps} />}
         </TabsContent>
       </Tabs>
diff --git a/apps/dashboard/src/utils/url.ts b/apps/dashboard/src/utils/url.ts
new file mode 100644
index 00000000000..501ee540b41
--- /dev/null
+++ b/apps/dashboard/src/utils/url.ts
@@ -0,0 +1,9 @@
+import { RedirectTargetEnum } from '@novu/shared';
+
+export const urlTargetTypes = [
+  RedirectTargetEnum.SELF,
+  RedirectTargetEnum.BLANK,
+  RedirectTargetEnum.PARENT,
+  RedirectTargetEnum.TOP,
+  RedirectTargetEnum.UNFENCED_TOP,
+];