diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index 047186260..60001f4c6 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -46,6 +46,7 @@ export namespace Components {
         "importGraph": (root: Activity) => Promise<void>;
         "interactiveMode": boolean;
         "updateLayout": () => Promise<void>;
+        "zoomToFit": () => Promise<void>;
     }
     interface ElsaCheckListInput {
         "inputContext": ActivityInputContext;
@@ -81,6 +82,7 @@ export namespace Components {
         "interactiveMode": boolean;
         "root"?: Activity;
         "updateLayout": () => Promise<void>;
+        "zoomToFit": () => Promise<void>;
     }
     interface ElsaFormPanel {
         "actions": Array<ActionDefinition>;
@@ -207,6 +209,9 @@ export namespace Components {
         "updateWorkflowDefinition": (workflowDefinition: WorkflowDefinition) => Promise<void>;
         "workflowDefinition"?: WorkflowDefinition;
     }
+    interface ElsaWorkflowDefinitionEditorToolbar {
+        "zoomToFit": () => Promise<void>;
+    }
     interface ElsaWorkflowDefinitionEditorToolbox {
         "graph": Graph;
     }
@@ -477,6 +482,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: {
@@ -580,6 +591,7 @@ declare global {
         "elsa-variables-editor": HTMLElsaVariablesEditorElement;
         "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;
@@ -772,6 +784,9 @@ declare namespace LocalJSX {
         "onWorkflowUpdated"?: (event: CustomEvent<WorkflowDefinitionUpdatedArgs>) => void;
         "workflowDefinition"?: WorkflowDefinition;
     }
+    interface ElsaWorkflowDefinitionEditorToolbar {
+        "zoomToFit"?: () => Promise<void>;
+    }
     interface ElsaWorkflowDefinitionEditorToolbox {
         "graph"?: Graph;
     }
@@ -852,6 +867,7 @@ declare namespace LocalJSX {
         "elsa-variables-editor": ElsaVariablesEditor;
         "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;
@@ -905,6 +921,7 @@ declare module "@stencil/core" {
             "elsa-variables-editor": LocalJSX.ElsaVariablesEditor & JSXBase.HTMLAttributes<HTMLElsaVariablesEditorElement>;
             "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/activities/container-activity-component.tsx b/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx
index 0a8f9810c..f247a5a15 100644
--- a/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx
@@ -6,4 +6,5 @@ export interface ContainerActivityComponent {
   addActivity(args: AddActivityArgs): Promise<void>;
   exportRoot(): Promise<Activity>
   importRoot(root: Activity): Promise<void>;
+  zoomToFit(): Promise<void>;
 }
diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx
index 3bebf9b44..ca7231fb4 100644
--- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx
@@ -62,6 +62,12 @@ export class FlowchartComponent implements ContainerActivityComponent {
     this.graph.updateBackground();
   }
 
+  @Method()
+  public async zoomToFit(){
+    const graph = this.graph;
+    graph.zoomToFit();
+  }
+
   @Method()
   public async addActivity(args: AddActivityArgs): Promise<void> {
     const graph = this.graph;
@@ -71,7 +77,8 @@ export class FlowchartComponent implements ContainerActivityComponent {
     // TODO: Figure out how to convert client coordinates to appropriate graph coordinates taking into account transformations.
     // See https://x6.antv.vision/en/docs/api/graph/coordinate for documentation.
     //const point = graph.coord.localToClientPoint(x, y);
-    const point: PointLike = {x, y};
+    const pageToLocal = graph.pageToLocal(x, y);
+    const point: PointLike = pageToLocal;
 
     const sx = point.x;
     const sy = point.y;
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx b/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx
index 33a4eaf05..db0c12968 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx
@@ -39,6 +39,11 @@ export class Canvas {
     return await this.root.exportRoot();
   }
 
+  @Method()
+  public async zoomToFit(): Promise<void> {
+    return await this.root.zoomToFit();
+  }
+
   @Method()
   public async importGraph(root: Activity): Promise<void> {
     return await this.root.importRoot(root);
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..ace7b4279
--- /dev/null
+++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx
@@ -0,0 +1,27 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'elsa-workflow-definition-editor-toolbar',
+})
+export class Toolbar {
+  @Prop()
+  public zoomToFit: () => Promise<void>;
+
+  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>
+        <button
+          onClick={this.zoomToFit}
+          class="relative ml-4 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"
+        >
+          Zoom to fit
+        </button>
+      </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 6c0b93e72..0b05077a2 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
@@ -173,6 +173,7 @@ export class WorkflowDefinitionEditor {
     return (
       <WorkflowEditorTunnel.Provider state={tunnelState}>
         <div class="absolute inset-0" ref={el => this.container = el}>
+          <elsa-workflow-definition-editor-toolbar zoomToFit={this.onZoomToFit} />
           <elsa-panel
             class="elsa-activity-picker-container"
             position={PanelPosition.Left}
@@ -274,11 +275,15 @@ export class WorkflowDefinitionEditor {
     await this.canvas.addActivity({
       descriptor: activityDescriptor,
       id: newName,
-      x: e.offsetX,
-      y: e.offsetY
+      x: e.pageX,
+      y: e.pageY
     });
   };
 
+  private onZoomToFit = async () => {
+    this.canvas.zoomToFit();
+  }
+
   private onActivityUpdated = (e: CustomEvent<ActivityUpdatedArgs>) => {
     const updatedActivity = e.detail.activity;
     this.applyActivityChanges(updatedActivity);