diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index e215a59e1..85d6c83b6 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -202,6 +202,8 @@ export namespace Components {
         "updateWorkflowDefinition": (workflowDefinition: WorkflowDefinition) => Promise<void>;
         "workflowDefinition"?: WorkflowDefinition;
     }
+    interface ElsaWorkflowDefinitionEditorToolbar {
+    }
     interface ElsaWorkflowDefinitionEditorToolbox {
         "graph": Graph;
     }
@@ -461,6 +463,12 @@ declare global {
         prototype: HTMLElsaWorkflowDefinitionEditorElement;
         new (): HTMLElsaWorkflowDefinitionEditorElement;
     };
+    interface HTMLElsaWorkflowDefinitionEditorToolbarElement extends Components.ElsaWorkflowDefinitionEditorToolbar, HTMLStencilElement {
+    }
+    var HTMLElsaWorkflowDefinitionEditorToolbarElement: {
+        prototype: HTMLElsaWorkflowDefinitionEditorToolbarElement;
+        new (): HTMLElsaWorkflowDefinitionEditorToolbarElement;
+    };
     interface HTMLElsaWorkflowDefinitionEditorToolboxElement extends Components.ElsaWorkflowDefinitionEditorToolbox, HTMLStencilElement {
     }
     var HTMLElsaWorkflowDefinitionEditorToolboxElement: {
@@ -562,6 +570,7 @@ declare global {
         "elsa-tooltip": HTMLElsaTooltipElement;
         "elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement;
         "elsa-workflow-definition-editor": HTMLElsaWorkflowDefinitionEditorElement;
+        "elsa-workflow-definition-editor-toolbar": HTMLElsaWorkflowDefinitionEditorToolbarElement;
         "elsa-workflow-definition-editor-toolbox": HTMLElsaWorkflowDefinitionEditorToolboxElement;
         "elsa-workflow-definition-editor-toolbox-activities": HTMLElsaWorkflowDefinitionEditorToolboxActivitiesElement;
         "elsa-workflow-definition-properties-editor": HTMLElsaWorkflowDefinitionPropertiesEditorElement;
@@ -749,6 +758,8 @@ declare namespace LocalJSX {
         "onWorkflowUpdated"?: (event: CustomEvent<WorkflowDefinitionUpdatedArgs>) => void;
         "workflowDefinition"?: WorkflowDefinition;
     }
+    interface ElsaWorkflowDefinitionEditorToolbar {
+    }
     interface ElsaWorkflowDefinitionEditorToolbox {
         "graph"?: Graph;
     }
@@ -828,6 +839,7 @@ declare namespace LocalJSX {
         "elsa-tooltip": ElsaTooltip;
         "elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser;
         "elsa-workflow-definition-editor": ElsaWorkflowDefinitionEditor;
+        "elsa-workflow-definition-editor-toolbar": ElsaWorkflowDefinitionEditorToolbar;
         "elsa-workflow-definition-editor-toolbox": ElsaWorkflowDefinitionEditorToolbox;
         "elsa-workflow-definition-editor-toolbox-activities": ElsaWorkflowDefinitionEditorToolboxActivities;
         "elsa-workflow-definition-properties-editor": ElsaWorkflowDefinitionPropertiesEditor;
@@ -879,6 +891,7 @@ declare module "@stencil/core" {
             "elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes<HTMLElsaTooltipElement>;
             "elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionBrowserElement>;
             "elsa-workflow-definition-editor": LocalJSX.ElsaWorkflowDefinitionEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorElement>;
+            "elsa-workflow-definition-editor-toolbar": LocalJSX.ElsaWorkflowDefinitionEditorToolbar & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolbarElement>;
             "elsa-workflow-definition-editor-toolbox": LocalJSX.ElsaWorkflowDefinitionEditorToolbox & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxElement>;
             "elsa-workflow-definition-editor-toolbox-activities": LocalJSX.ElsaWorkflowDefinitionEditorToolboxActivities & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxActivitiesElement>;
             "elsa-workflow-definition-properties-editor": LocalJSX.ElsaWorkflowDefinitionPropertiesEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionPropertiesEditorElement>;
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx
new file mode 100644
index 000000000..be85ffbc6
--- /dev/null
+++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx
@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'elsa-workflow-definition-editor-toolbar',
+})
+export class Toolbar {
+  render() {
+    return (
+      <div class="flex justify-center absolute border-b border-gray-200 top-0 px-1 pl-4 py-2 text-sm bg-white z-10 elsa-panel-toolbar">
+        <elsa-tooltip tooltipPosition="right" tooltipContent={<p class="text-gray-600 text-sm">Currently in development</p>}>
+          <button class="relative inline-flex items-center px-4 py-2 rounded border border-blue-600 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:z-10 focus:outline-none focus:ring-blue-600 hover:border-blue-700">
+            Auto-Layout
+          </button>
+        </elsa-tooltip>
+      </div>
+    );
+  }
+}
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss
index ddd63540f..81b034ba0 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss
+++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss
@@ -9,6 +9,11 @@ elsa-canvas {
   bottom: 0;
 }
 
+.elsa-panel-toolbar {
+  left: var(--activity-picker-width);
+  right: var(--activity-editor-width);
+}
+
 elsa-panel.panel-state-expanded.elsa-activity-picker-container {
   width: var(--activity-picker-width);
 }
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx
index a0690afad..5f2cecc40 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx
@@ -170,6 +170,7 @@ export class WorkflowDefinitionEditor {
     return (
       <WorkflowEditorTunnel.Provider state={tunnelState}>
         <div class="absolute inset-0" ref={el => this.container = el}>
+          <elsa-workflow-definition-editor-toolbar />
           <elsa-panel
             class="elsa-activity-picker-container"
             position={PanelPosition.Left}