diff --git a/apps/dashboard/eslint.config.js b/apps/dashboard/eslint.config.js
index 16d07b7f581..95bb45ab773 100644
--- a/apps/dashboard/eslint.config.js
+++ b/apps/dashboard/eslint.config.js
@@ -20,7 +20,7 @@ export default tseslint.config(
     rules: {
       ...reactHooks.configs.recommended.rules,
       '@typescript-eslint/no-explicit-any': 'warn',
-      'react-refresh/only-export-components': ['error', { allowConstantExport: true }],
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       '@typescript-eslint/no-unused-vars': ['off'],
       '@typescript-eslint/naming-convention': [
         'error',
diff --git a/apps/dashboard/src/components/dashboard-layout.tsx b/apps/dashboard/src/components/dashboard-layout.tsx
index 8977c31bca5..366bb332969 100644
--- a/apps/dashboard/src/components/dashboard-layout.tsx
+++ b/apps/dashboard/src/components/dashboard-layout.tsx
@@ -18,7 +18,7 @@ export const DashboardLayout = ({
       <div className="relative flex h-full w-full">
         <SideNavigation />
         <div className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
-          <HeaderNavigation startItems={headerStartItems} />
+          <HeaderNavigation startItems={headerStartItems} className="pt-4" />
 
           <div className="flex flex-1 flex-col overflow-y-auto overflow-x-hidden">{children}</div>
         </div>
diff --git a/apps/dashboard/src/components/header-navigation/header-navigation.tsx b/apps/dashboard/src/components/header-navigation/header-navigation.tsx
index 869902079fc..a613622f950 100644
--- a/apps/dashboard/src/components/header-navigation/header-navigation.tsx
+++ b/apps/dashboard/src/components/header-navigation/header-navigation.tsx
@@ -1,18 +1,21 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { UserProfile } from '@/components/user-profile';
 import { InboxButton } from '@/components/inbox-button';
 import { CustomerSupportButton } from './customer-support-button';
 import { EditBridgeUrlButton } from './edit-bridge-url-button';
+import { cn } from '@/utils/ui';
 
-export const HeaderNavigation = ({
-  startItems,
-  hideBridgeUrl = false,
-}: {
+type HeaderNavigationProps = HTMLAttributes<HTMLDivElement> & {
   startItems?: ReactNode;
   hideBridgeUrl?: boolean;
-}) => {
+};
+export const HeaderNavigation = (props: HeaderNavigationProps) => {
+  const { startItems, hideBridgeUrl = false, className, ...rest } = props;
   return (
-    <div className="bg-background flex w-full items-center justify-between border-b px-2.5 py-1.5">
+    <div
+      className={cn('bg-background flex w-full items-center justify-between border-b px-2.5 py-1.5', className)}
+      {...rest}
+    >
       {startItems}
       <div className="text-foreground-600 ml-auto flex items-center gap-3">
         {!hideBridgeUrl ? <EditBridgeUrlButton /> : null}
diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
index 14ddf1bcf7f..001dbaaf3c0 100644
--- a/apps/dashboard/src/components/primitives/button.tsx
+++ b/apps/dashboard/src/components/primitives/button.tsx
@@ -1,8 +1,42 @@
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/utils/ui';
-import { buttonVariants } from './variants';
+
+export const buttonVariants = cva(
+  `relative isolate inline-flex items-center justify-center whitespace-nowrap rounded-lg gap-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,
+  {
+    variants: {
+      variant: {
+        default:
+          '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 [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 [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 text-foreground-600 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',
+        ghostDestructive: 'hover:bg-destructive/10 text-destructive',
+        link: 'underline-offset-4 hover:underline',
+        light:
+          'bg-destructive/10 hover:bg-background hover:border hover:border-destructive text-destructive focus-visible:ring-destructive/10 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:bg-background focus-visible:border focus-visible:border-destructive',
+      },
+      size: {
+        default: 'h-9 p-2.5',
+        xs: 'h-6 px-1.5 rounded-md text-xs',
+        sm: 'h-8 px-1.5 rounded-md text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'size-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
diff --git a/apps/dashboard/src/components/primitives/pagination.tsx b/apps/dashboard/src/components/primitives/pagination.tsx
index 762a74ff278..8a348c592b6 100644
--- a/apps/dashboard/src/components/primitives/pagination.tsx
+++ b/apps/dashboard/src/components/primitives/pagination.tsx
@@ -8,8 +8,7 @@ import {
 } from '@radix-ui/react-icons';
 
 import { cn } from '@/utils/ui';
-import { ButtonProps } from '@/components/primitives/button';
-import { buttonVariants } from '@/components/primitives/variants';
+import { ButtonProps, buttonVariants } from '@/components/primitives/button';
 import { Link, LinkProps } from 'react-router-dom';
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
diff --git a/apps/dashboard/src/components/primitives/variants.ts b/apps/dashboard/src/components/primitives/variants.ts
index ecfdeab6b90..e85a8236b26 100644
--- a/apps/dashboard/src/components/primitives/variants.ts
+++ b/apps/dashboard/src/components/primitives/variants.ts
@@ -57,39 +57,6 @@ export const badgeContentVariants = cva('text-xs font-medium', {
   },
 });
 
-export const buttonVariants = cva(
-  `relative isolate inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`,
-  {
-    variants: {
-      variant: {
-        default:
-          '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 [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 [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',
-        link: 'underline-offset-4 hover:underline',
-        light:
-          'bg-destructive/10 hover:bg-background hover:border hover:border-destructive text-destructive focus-visible:ring-destructive/10 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:bg-background focus-visible:border focus-visible:border-destructive',
-      },
-      size: {
-        default: 'h-9 p-2.5',
-        xs: 'h-6 px-1.5 rounded-md text-xs',
-        sm: 'h-8 px-1.5 rounded-md text-sm',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'size-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
 export const stepVariants = cva(
   'inline-flex items-center shadow-xs rounded-full border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 bg-neutral-50',
   {
diff --git a/apps/dashboard/src/components/side-navigation/Sidebar.tsx b/apps/dashboard/src/components/side-navigation/Sidebar.tsx
new file mode 100644
index 00000000000..48a7d970aca
--- /dev/null
+++ b/apps/dashboard/src/components/side-navigation/Sidebar.tsx
@@ -0,0 +1,33 @@
+import { cn } from '@/utils/ui';
+import { cva, VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+
+type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
+export const SidebarHeader = (props: SidebarHeaderProps) => {
+  const { className, ...rest } = props;
+  return <div className={cn('flex gap-2.5 px-2 py-3.5', className)} {...rest} />;
+};
+
+export const sidebarContentVariants = cva(`flex flex-col`, {
+  variants: {
+    size: {
+      sm: 'gap-2 px-3 py-2',
+      md: 'gap-2.5 px-3 py-3',
+      lg: 'gap-2.5 px-3 py-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+type SidebarContentProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof sidebarContentVariants>;
+export const SidebarContent = (props: SidebarContentProps) => {
+  const { className, size, ...rest } = props;
+  return <div className={cn(sidebarContentVariants({ size }), className)} {...rest} />;
+};
+
+type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
+export const SidebarFooter = (props: SidebarFooterProps) => {
+  const { className, ...rest } = props;
+  return <div className={cn('mt-auto space-y-2.5 px-2 py-3.5', className)} {...rest} />;
+};
diff --git a/apps/dashboard/src/components/side-navigation/side-navigation.tsx b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
index 249e1d7b8fa..66b338462bd 100644
--- a/apps/dashboard/src/components/side-navigation/side-navigation.tsx
+++ b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
@@ -19,6 +19,7 @@ import { buildRoute, LEGACY_ROUTES, ROUTES } from '@/utils/routes';
 import { SubscribersStayTunedModal } from './subscribers-stay-tuned-modal';
 import { TelemetryEvent } from '@/utils/telemetry';
 import { useTelemetry } from '@/hooks/use-telemetry';
+import { SidebarContent } from '@/components/side-navigation/Sidebar';
 
 const linkVariants = cva(
   `flex items-center gap-2 text-sm py-1.5 px-2 rounded-lg focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer`,
@@ -91,54 +92,56 @@ export const SideNavigation = () => {
   };
 
   return (
-    <aside className="bg-neutral-alpha-50 relative flex w-[275px] flex-shrink-0 flex-col gap-3 px-2 pb-3 pt-1.5">
-      <FreeTrialCard />
-      <OrganizationDropdown />
-      <EnvironmentDropdown value={currentEnvironment?.name} data={environmentNames} onChange={onEnvironmentChange} />
-      <nav className="flex flex-1 flex-col gap-4">
-        <NavigationGroup>
-          <NavigationLink to={buildRoute(ROUTES.WORKFLOWS, { environmentId: currentEnvironment?._id ?? '' })}>
-            <RiRouteFill className="size-4" />
-            <span>Workflows</span>
-          </NavigationLink>
-          <SubscribersStayTunedModal>
-            <span onClick={() => track(TelemetryEvent.SUBSCRIBERS_LINK_CLICKED)}>
-              <NavigationLink>
-                <RiGroup2Line className="size-4" />
-                <span>Subscribers</span>
-              </NavigationLink>
-            </span>
-          </SubscribersStayTunedModal>
-        </NavigationGroup>
-        <NavigationGroup label="Monitor">
-          <NavigationLink to={LEGACY_ROUTES.ACTIVITY_FEED} isExternal>
-            <RiBarChartBoxLine className="size-4" />
-            <span>Activity Feed</span>
-          </NavigationLink>
-        </NavigationGroup>
-        <NavigationGroup label="Developer">
-          <NavigationLink to={LEGACY_ROUTES.INTEGRATIONS} isExternal>
-            <RiStore3Line className="size-4" />
-            <span>Integration Store</span>
-          </NavigationLink>
-          <NavigationLink to={LEGACY_ROUTES.API_KEYS} isExternal>
-            <RiKey2Line className="size-4" />
-            <span>API Keys</span>
-          </NavigationLink>
-        </NavigationGroup>
-        <NavigationGroup label="Application">
-          <NavigationLink to={LEGACY_ROUTES.SETTINGS} isExternal>
-            <RiSettings4Line className="size-4" />
-            <span>Settings</span>
-          </NavigationLink>
-        </NavigationGroup>
-        <NavigationGroup>
-          <NavigationLink to={LEGACY_ROUTES.INVITE_TEAM_MEMBERS} isExternal>
-            <RiUserAddLine className="size-4" />
-            <span>Invite teammates</span>
-          </NavigationLink>
-        </NavigationGroup>
-      </nav>
+    <aside className="bg-neutral-alpha-50 relative flex w-[275px] flex-shrink-0 flex-col">
+      <SidebarContent>
+        <FreeTrialCard />
+        <OrganizationDropdown />
+        <EnvironmentDropdown value={currentEnvironment?.name} data={environmentNames} onChange={onEnvironmentChange} />
+        <nav className="flex flex-1 flex-col gap-4">
+          <NavigationGroup>
+            <NavigationLink to={buildRoute(ROUTES.WORKFLOWS, { environmentId: currentEnvironment?._id ?? '' })}>
+              <RiRouteFill className="size-4" />
+              <span>Workflows</span>
+            </NavigationLink>
+            <SubscribersStayTunedModal>
+              <span onClick={() => track(TelemetryEvent.SUBSCRIBERS_LINK_CLICKED)}>
+                <NavigationLink>
+                  <RiGroup2Line className="size-4" />
+                  <span>Subscribers</span>
+                </NavigationLink>
+              </span>
+            </SubscribersStayTunedModal>
+          </NavigationGroup>
+          <NavigationGroup label="Monitor">
+            <NavigationLink to={LEGACY_ROUTES.ACTIVITY_FEED} isExternal>
+              <RiBarChartBoxLine className="size-4" />
+              <span>Activity Feed</span>
+            </NavigationLink>
+          </NavigationGroup>
+          <NavigationGroup label="Developer">
+            <NavigationLink to={LEGACY_ROUTES.INTEGRATIONS} isExternal>
+              <RiStore3Line className="size-4" />
+              <span>Integration Store</span>
+            </NavigationLink>
+            <NavigationLink to={LEGACY_ROUTES.API_KEYS} isExternal>
+              <RiKey2Line className="size-4" />
+              <span>API Keys</span>
+            </NavigationLink>
+          </NavigationGroup>
+          <NavigationGroup label="Application">
+            <NavigationLink to={LEGACY_ROUTES.SETTINGS} isExternal>
+              <RiSettings4Line className="size-4" />
+              <span>Settings</span>
+            </NavigationLink>
+          </NavigationGroup>
+          <NavigationGroup>
+            <NavigationLink to={LEGACY_ROUTES.INVITE_TEAM_MEMBERS} isExternal>
+              <RiUserAddLine className="size-4" />
+              <span>Invite teammates</span>
+            </NavigationLink>
+          </NavigationGroup>
+        </nav>
+      </SidebarContent>
     </aside>
   );
 };
diff --git a/apps/dashboard/src/components/workflow-editor/action-picker.tsx b/apps/dashboard/src/components/workflow-editor/action-picker.tsx
index 3ba60478815..83f893d2c03 100644
--- a/apps/dashboard/src/components/workflow-editor/action-picker.tsx
+++ b/apps/dashboard/src/components/workflow-editor/action-picker.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/primitives/button';
+import { Button, buttonVariants } from '@/components/primitives/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,7 +10,6 @@ import { Input, InputField } from '@/components/primitives/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/primitives/popover';
 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';
diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
index 80bceb38634..e5512d38243 100644
--- a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
+++ b/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
@@ -13,44 +13,52 @@ import { Button } from '../primitives/button';
 import { CopyButton } from '../primitives/copy-button';
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../primitives/form/form';
 import { Switch } from '../primitives/switch';
+import { useWorkflowEditorContext } from '@/components/workflow-editor/hooks';
+import { cn } from '@/utils/ui';
+import { SidebarContent, SidebarHeader } from '@/components/side-navigation/Sidebar';
 
 export function ConfigureWorkflow() {
   const tagsQuery = useTagsQuery();
+  const { isReadOnly } = useWorkflowEditorContext();
 
   const { control } = useFormContext<z.infer<typeof workflowSchema>>();
   return (
     <motion.div
-      className="flex h-full w-full flex-col"
+      className={cn('relative flex h-full w-full flex-col')}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0.1 }}
       transition={{ duration: 0.1 }}
     >
-      <div className="flex items-center gap-2.5 px-3 pb-3.5 text-sm font-medium">
-        <RouteFill />
-        <span>Configure workflow</span>
-      </div>
+      <SidebarHeader className="items-center text-sm font-medium">
+        <div className="flex items-center gap-1">
+          <RouteFill />
+          <span>Configure workflow</span>
+        </div>
+      </SidebarHeader>
       <Separator />
-      <FormField
-        control={control}
-        name="active"
-        render={({ field }) => (
-          <FormItem className="flex items-center justify-between gap-2.5 space-y-0 px-3 py-2">
-            <div className="flex items-center gap-4">
-              <div
-                className="bg-success/60 data-[active=false]:shadow-neutral-alpha-100 ml-2 h-1.5 w-1.5 rounded-full [--pulse-color:var(--success)] data-[active=true]:animate-[pulse-shadow_1s_ease-in-out_infinite] data-[active=false]:bg-neutral-300 data-[active=false]:shadow-[0_0px_0px_5px_var(--neutral-alpha-200),0_0px_0px_9px_var(--neutral-alpha-100)]"
-                data-active={field.value}
-              />
-              <FormLabel>Active Workflow</FormLabel>
-            </div>
-            <FormControl>
-              <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl>
-          </FormItem>
-        )}
-      />
+      <SidebarContent size="md">
+        <FormField
+          control={control}
+          name="active"
+          render={({ field }) => (
+            <FormItem className="flex w-full items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div
+                  className="bg-success/60 data-[active=false]:shadow-neutral-alpha-100 ml-2 h-1.5 w-1.5 rounded-full [--pulse-color:var(--success)] data-[active=true]:animate-[pulse-shadow_1s_ease-in-out_infinite] data-[active=false]:bg-neutral-300 data-[active=false]:shadow-[0_0px_0px_5px_var(--neutral-alpha-200),0_0px_0px_9px_var(--neutral-alpha-100)]"
+                  data-active={field.value}
+                />
+                <FormLabel>Active Workflow</FormLabel>
+              </div>
+              <FormControl>
+                <Switch checked={field.value} onCheckedChange={field.onChange} disabled={isReadOnly} />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </SidebarContent>
       <Separator />
-      <div className="flex flex-col gap-4 p-3">
+      <SidebarContent>
         <FormField
           control={control}
           name="name"
@@ -59,7 +67,7 @@ export function ConfigureWorkflow() {
               <FormLabel>Workflow Name</FormLabel>
               <FormControl>
                 <InputField>
-                  <Input placeholder="Untitled" {...field} />
+                  <Input placeholder="Untitled" {...field} disabled={isReadOnly} />
                 </InputField>
               </FormControl>
               <FormMessage />
@@ -74,7 +82,7 @@ export function ConfigureWorkflow() {
               <FormLabel>Workflow Identifier</FormLabel>
               <FormControl>
                 <InputField className="flex overflow-hidden pr-0">
-                  <Input placeholder="Untitled" {...field} readOnly />
+                  <Input placeholder="Untitled" {...field} disabled={isReadOnly} />
                   <CopyButton
                     content={field.value}
                     className="rounded-md rounded-s-none border-b-0 border-r-0 border-t-0 text-neutral-400"
@@ -92,7 +100,7 @@ export function ConfigureWorkflow() {
             <FormItem>
               <FormLabel>Description</FormLabel>
               <FormControl>
-                <Textarea placeholder="Description of what this workflow does" {...field} />
+                <Textarea placeholder="Description of what this workflow does" {...field} disabled={isReadOnly} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -109,22 +117,23 @@ export function ConfigureWorkflow() {
               <FormControl className="text-xs text-neutral-600">
                 <TagInput
                   {...field}
+                  disabled={isReadOnly}
                   value={field.value ?? []}
                   suggestions={tagsQuery.data?.data.map((tag) => tag.name) || []}
-                  showAddButton
+                  showAddButton={!isReadOnly}
                 />
               </FormControl>
             </FormItem>
           )}
         />
-      </div>
+      </SidebarContent>
       <Separator />
-      <div className="px-3 py-4">
+      <SidebarContent size="lg">
         <Button variant="outline" className="flex w-full justify-start gap-1.5 text-xs font-medium" type="button">
           <RiSettingsLine className="h-4 w-4 text-neutral-600" />
           Configure channel preferences <RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
         </Button>
-      </div>
+      </SidebarContent>
       <Separator />
     </motion.div>
   );
diff --git a/apps/dashboard/src/components/workflow-editor/edges.tsx b/apps/dashboard/src/components/workflow-editor/edges.tsx
index e954b3c7f76..42d30bde9c5 100644
--- a/apps/dashboard/src/components/workflow-editor/edges.tsx
+++ b/apps/dashboard/src/components/workflow-editor/edges.tsx
@@ -15,7 +15,7 @@ export function AddNodeEdge({
   data = { isLast: false, addStepIndex: 0 },
   markerEnd,
 }: EdgeProps<AddNodeEdgeType>) {
-  const { addStep } = useWorkflowEditorContext();
+  const { addStep, isReadOnly } = useWorkflowEditorContext();
 
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -42,11 +42,13 @@ export function AddNodeEdge({
             }}
             className="nodrag nopan"
           >
-            <AddStepMenu
-              onMenuItemClick={(stepType) => {
-                addStep(stepType, data.addStepIndex);
-              }}
-            />
+            {!isReadOnly && (
+              <AddStepMenu
+                onMenuItemClick={(stepType) => {
+                  addStep(stepType, data.addStepIndex);
+                }}
+              />
+            )}
           </div>
         </EdgeLabelRenderer>
       )}
diff --git a/apps/dashboard/src/components/workflow-editor/nodes.tsx b/apps/dashboard/src/components/workflow-editor/nodes.tsx
index 224a402bf8b..b6e952336e7 100644
--- a/apps/dashboard/src/components/workflow-editor/nodes.tsx
+++ b/apps/dashboard/src/components/workflow-editor/nodes.tsx
@@ -203,7 +203,11 @@ export const CustomNode = ({ data }: NodeProps<NodeType>) => {
 };
 
 export const AddNode = (_props: NodeProps<NodeType>) => {
-  const { addStep } = useWorkflowEditorContext();
+  const { addStep, isReadOnly } = useWorkflowEditorContext();
+
+  if (isReadOnly) {
+    return null;
+  }
 
   return (
     <div className="flex w-[300px] justify-center">
diff --git a/apps/dashboard/src/components/workflow-editor/steps/chat.tsx b/apps/dashboard/src/components/workflow-editor/steps/chat.tsx
index a83d686ba94..c49dba1c96b 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/chat.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/chat.tsx
@@ -1,11 +1,10 @@
 import { Separator } from '@/components/primitives/separator';
 import { CommonFields } from './common-fields';
 import { SdkBanner } from './sdk-banner';
-import { DeleteStepButton } from './delete-step-button';
 
 export default function Chat() {
   return (
-    <div className="flex flex-1 flex-col">
+    <>
       <div className="flex flex-col gap-4 p-3">
         <CommonFields />
       </div>
@@ -13,8 +12,6 @@ export default function Chat() {
       <div className="px-3 py-4">
         <SdkBanner />
       </div>
-      <Separator />
-      <DeleteStepButton />
-    </div>
+    </>
   );
 }
diff --git a/apps/dashboard/src/components/workflow-editor/steps/common-fields.tsx b/apps/dashboard/src/components/workflow-editor/steps/common-fields.tsx
index 4fb488c6e5b..4e0ef82267e 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/common-fields.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/common-fields.tsx
@@ -1,3 +1,4 @@
+import { useWorkflowEditorContext } from '@/components/workflow-editor/hooks';
 import { CopyButton } from '../../primitives/copy-button';
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../primitives/form/form';
 import { Input, InputField } from '../../primitives/input';
@@ -5,6 +6,7 @@ import { useStep } from './use-step';
 
 export function CommonFields() {
   const { stepIndex, control } = useStep();
+  const { isReadOnly } = useWorkflowEditorContext();
 
   return (
     <>
@@ -16,7 +18,7 @@ export function CommonFields() {
             <FormLabel>Step Name</FormLabel>
             <FormControl>
               <InputField>
-                <Input placeholder="Untitled" {...field} />
+                <Input placeholder="Untitled" {...field} disabled={isReadOnly} />
               </InputField>
             </FormControl>
             <FormMessage />
@@ -31,7 +33,7 @@ export function CommonFields() {
             <FormLabel>Step Identifier</FormLabel>
             <FormControl>
               <InputField className="flex overflow-hidden pr-0">
-                <Input placeholder="Untitled" {...field} readOnly />
+                <Input placeholder="Untitled" {...field} readOnly disabled={isReadOnly} />
                 <CopyButton
                   content={field.value}
                   className="rounded-md rounded-s-none border-b-0 border-r-0 border-t-0 text-neutral-400"
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 7a69e2edf8b..be8d77c656b 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/configure-step.tsx
@@ -1,20 +1,23 @@
-import { Link, useParams } from 'react-router-dom';
-import { RiArrowLeftSLine, RiCloseFill } from 'react-icons/ri';
-import { motion } from 'framer-motion';
-import { StepTypeEnum } from '@/utils/enums';
-import { useStep } from './use-step';
-import { InApp } from './in-app';
-import { Separator } from '@/components/primitives/separator';
 import { Button } from '@/components/primitives/button';
+import { Separator } from '@/components/primitives/separator';
+import { SidebarFooter, SidebarHeader } from '@/components/side-navigation/Sidebar';
+import { useWorkflowEditorContext } from '@/components/workflow-editor/hooks';
 import { useEnvironment } from '@/context/environment/hooks';
+import { StepTypeEnum } from '@/utils/enums';
 import { buildRoute, ROUTES } from '@/utils/routes';
+import { motion } from 'framer-motion';
+import { RiArrowLeftSLine, RiCloseFill, RiDeleteBin2Line } from 'react-icons/ri';
+import { Link, useParams } from 'react-router-dom';
 import Chat from './chat';
+import { InApp } from './in-app';
+import { useStep } from './use-step';
 
 export function ConfigureStep() {
   const { currentEnvironment } = useEnvironment();
   const { workflowSlug = '' } = useParams<{
     workflowSlug: string;
   }>();
+  const { isReadOnly } = useWorkflowEditorContext();
 
   return (
     <motion.div
@@ -24,7 +27,7 @@ export function ConfigureStep() {
       exit={{ opacity: 0.1 }}
       transition={{ duration: 0.1 }}
     >
-      <div className="flex items-center gap-2.5 px-3 pb-3.5 text-sm font-medium">
+      <SidebarHeader className="flex items-center gap-2.5 text-sm font-medium">
         <Link
           to={buildRoute(ROUTES.EDIT_WORKFLOW, {
             environmentId: currentEnvironment?._id ?? '',
@@ -48,9 +51,25 @@ export function ConfigureStep() {
             <RiCloseFill />
           </Button>
         </Link>
-      </div>
+      </SidebarHeader>
+
       <Separator />
+
       <Step />
+
+      <Separator />
+
+      {!isReadOnly && (
+        <>
+          <SidebarFooter>
+            <Separator />
+            <Button variant="ghostDestructive" type="button">
+              <RiDeleteBin2Line className="size-4" />
+              Delete step
+            </Button>
+          </SidebarFooter>
+        </>
+      )}
     </motion.div>
   );
 }
diff --git a/apps/dashboard/src/components/workflow-editor/steps/delete-step-button.tsx b/apps/dashboard/src/components/workflow-editor/steps/delete-step-button.tsx
deleted file mode 100644
index c9fe3cd90b0..00000000000
--- a/apps/dashboard/src/components/workflow-editor/steps/delete-step-button.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Button } from '@/components/primitives/button';
-import { Separator } from '@/components/primitives/separator';
-import { RiDeleteBin2Line } from 'react-icons/ri';
-
-export function DeleteStepButton() {
-  return (
-    <div className="mt-auto flex flex-col gap-2 px-3 py-4 pb-0">
-      <Separator />
-      <div>
-        <Button variant="ghost" className="text-destructive gap-1" type="button">
-          <RiDeleteBin2Line className="size-4" />
-          Delete step
-        </Button>
-      </div>
-    </div>
-  );
-}
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 67e354b1df8..2e994545cc7 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,14 +1,14 @@
+import { Form } from '@/components/primitives/form/form';
+import { Sheet, SheetOverlay, SheetPortal } from '@/components/primitives/sheet';
+import { useFetchWorkflow, useUpdateWorkflow } from '@/hooks';
+import { handleValidationIssues } from '@/utils/handleValidationIssues';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { motion } from 'framer-motion';
 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 { useNavigate, useParams } from 'react-router-dom';
 import * as z from 'zod';
-import { motion } from 'framer-motion';
 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 };
diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app.tsx
index c2544707767..356cc2ebb59 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/in-app.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/in-app.tsx
@@ -3,24 +3,25 @@ import { RiArrowRightSLine, RiPencilRuler2Fill } from 'react-icons/ri';
 import { Button } from '../../primitives/button';
 import { Separator } from '../../primitives/separator';
 import { CommonFields } from './common-fields';
-import { DeleteStepButton } from './delete-step-button';
+import { SidebarContent } from '@/components/side-navigation/Sidebar';
 
 export function InApp() {
   return (
-    <div className="flex flex-1 flex-col">
-      <div className="flex flex-col gap-4 p-3">
+    <>
+      <SidebarContent>
         <CommonFields />
-      </div>
+      </SidebarContent>
+
       <Separator />
-      <div className="px-3 py-4">
+
+      <SidebarContent>
         <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 in-app template <RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
           </Button>
         </Link>
-      </div>
-      <DeleteStepButton />
-    </div>
+      </SidebarContent>
+    </>
   );
 }
diff --git a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-logs-sidebar.tsx b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-logs-sidebar.tsx
index feccf2258fd..cd558ca8c28 100644
--- a/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-logs-sidebar.tsx
+++ b/apps/dashboard/src/components/workflow-editor/test-workflow/test-workflow-logs-sidebar.tsx
@@ -1,3 +1,3 @@
 export const TestWorkflowLogsSidebar = () => {
-  return <aside className="flex h-full w-[500px] flex-col border-l px-3 py-2.5">Logs</aside>;
+  return <aside className="flex h-full w-[500px] flex-col border-l">Logs</aside>;
 };
diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor-context.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor-context.tsx
index 4da605582ed..ee0c629482c 100644
--- a/apps/dashboard/src/components/workflow-editor/workflow-editor-context.tsx
+++ b/apps/dashboard/src/components/workflow-editor/workflow-editor-context.tsx
@@ -3,6 +3,7 @@ import type { StepTypeEnum } from '@/utils/enums';
 
 export type WorkflowEditorContextType = {
   addStep: (channelType: StepTypeEnum, stepIndex?: number) => void;
+  isReadOnly: boolean;
 };
 
 export const WorkflowEditorContext = createContext<WorkflowEditorContextType>({} as WorkflowEditorContextType);
diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
index 54f9e802ff9..27b19ab8375 100644
--- a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
+++ b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx
@@ -17,6 +17,7 @@ import { Step } from '@/utils/types';
 import { showToast } from '../primitives/sonner-helpers';
 import { ToastIcon } from '../primitives/sonner';
 import { handleValidationIssues } from '@/utils/handleValidationIssues';
+import { WorkflowOriginEnum } from '@novu/shared';
 
 const STEP_NAME_BY_TYPE: Record<StepTypeEnum, string> = {
   email: 'Email Step',
@@ -52,6 +53,7 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
   const { workflow, error } = useFetchWorkflow({
     workflowSlug,
   });
+  const isReadOnly = workflow?.origin === WorkflowOriginEnum.EXTERNAL;
 
   useLayoutEffect(() => {
     if (error) {
@@ -108,6 +110,7 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
 
       updateWorkflow({ id: workflow._id, workflow: { ...workflow, ...data } as any });
     },
+    enabled: !isReadOnly,
   });
 
   const addStep = useCallback(
@@ -124,9 +127,10 @@ export const WorkflowEditorProvider = ({ children }: { children: ReactNode }) =>
 
   const value = useMemo(
     () => ({
+      isReadOnly,
       addStep,
     }),
-    [addStep]
+    [addStep, isReadOnly]
   );
 
   return (
diff --git a/apps/dashboard/src/components/workflow-list.tsx b/apps/dashboard/src/components/workflow-list.tsx
index 0b27e8f6f67..d1ed9203f10 100644
--- a/apps/dashboard/src/components/workflow-list.tsx
+++ b/apps/dashboard/src/components/workflow-list.tsx
@@ -15,7 +15,7 @@ import { createSearchParams, Link, useLocation, useSearchParams } from 'react-ro
 import { getV2 } from '@/api/api.client';
 import { DefaultPagination } from '@/components/default-pagination';
 import { Badge, BadgeContent } from '@/components/primitives/badge';
-import { Button } from '@/components/primitives/button';
+import { Button, buttonVariants } from '@/components/primitives/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,7 +35,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/primitives/table';
-import { buttonVariants } from '@/components/primitives/variants';
 import TruncatedText from '@/components/truncated-text';
 import { WorkflowCloud } from '@/components/workflow-cloud';
 import { WorkflowStatus } from '@/components/workflow-status';
diff --git a/apps/dashboard/src/hooks/use-form-autosave.ts b/apps/dashboard/src/hooks/use-form-autosave.ts
index 6db5196d32b..93266ec013e 100644
--- a/apps/dashboard/src/hooks/use-form-autosave.ts
+++ b/apps/dashboard/src/hooks/use-form-autosave.ts
@@ -6,9 +6,11 @@ import { useDataRef } from './use-data-ref';
 export const useFormAutoSave = <T extends FieldValues>({
   onSubmit,
   form,
+  enabled = true,
 }: {
   onSubmit: SubmitHandler<T>;
   form: UseFormReturn<T>;
+  enabled?: boolean;
 }) => {
   const onSubmitRef = useDataRef(onSubmit);
   const { formState, control, handleSubmit } = form;
@@ -18,7 +20,9 @@ export const useFormAutoSave = <T extends FieldValues>({
   });
 
   const debouncedSave = useDebounce(() => {
-    handleSubmit(onSubmitRef.current)();
+    if (enabled) {
+      handleSubmit(onSubmitRef.current)();
+    }
   }, 500);
 
   useDeepCompareEffect(() => {
diff --git a/apps/dashboard/src/pages/edit-workflow.tsx b/apps/dashboard/src/pages/edit-workflow.tsx
index 61ea915e0ed..72e3082eebf 100644
--- a/apps/dashboard/src/pages/edit-workflow.tsx
+++ b/apps/dashboard/src/pages/edit-workflow.tsx
@@ -5,16 +5,13 @@ import { EditorBreadcrumbs } from '@/components/workflow-editor/editor-breadcrum
 import { Toaster } from '@/components/primitives/sonner';
 import { AnimatedOutlet } from '@/components/animated-outlet';
 
-const asideClassName =
-  'text-foreground-950 flex h-full w-[300px] max-w-[350px] flex-col border-l pb-5 pt-3.5 [&_input]:text-xs [&_input]:text-neutral-600 [&_label]:text-xs [&_label]:font-medium [&_textarea]:text-xs [&_textarea]:text-neutral-600';
-
 export const EditWorkflowPage = () => {
   return (
     <WorkflowEditorProvider>
       <EditWorkflowLayout headerStartItems={<EditorBreadcrumbs />}>
         <div className="flex h-full flex-1 flex-nowrap">
           <WorkflowEditor />
-          <aside className={asideClassName}>
+          <aside className="text-foreground-950 [&_textarea]:text-neutral-600'; flex h-full w-[300px] max-w-[350px] flex-col border-l [&_input]:text-xs [&_input]:text-neutral-600 [&_label]:text-xs [&_label]:font-medium [&_textarea]:text-xs">
             <AnimatedOutlet />
           </aside>
           <Toaster />