diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx
index 8d63f0473..aa953eb1b 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/activity-properties-editor.tsx
@@ -92,13 +92,13 @@ export class ActivityPropertiesEditor {
     const {activity, activityDescriptor} = this.renderContext;
 
     const commonTab: TabDefinition = {
-      displayText: 'Common',
-      order: 50,
+      displayText: 'General',
+      order: 0,
       content: () => this.renderCommonTab()
     };
 
     const inputTab: TabDefinition = {
-      displayText: 'Input',
+      displayText: 'Settings',
       order: 10,
       content: () => this.renderInputTab()
     };
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 4cf522a3a..4108be89d 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
@@ -27,6 +27,7 @@ elsa-panel.panel-state-expanded.elsa-activity-editor-container {
 elsa-workflow-navigator {
   top: 70px;
   position: absolute;
+  z-index: 50;
   left: var(--activity-picker-width);
   right: var(--activity-editor-width);
 }
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-navigator/workflow-navigator.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-navigator/workflow-navigator.tsx
index c544a7bdf..8213451e8 100644
--- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-navigator/workflow-navigator.tsx
+++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-navigator/workflow-navigator.tsx
@@ -1,4 +1,5 @@
 import {Component, h} from "@stencil/core";
+import {FlowchartIcon, IfIcon} from "../../icons/activities";
 
 @Component({
   tag: 'elsa-workflow-navigator',
@@ -6,6 +7,43 @@ import {Component, h} from "@stencil/core";
 })
 export class WorkflowNavigator {
   render() {
-    return <div class="text-gray-500">Breadcrumbs</div>
+    return <div class="ml-8">
+      <nav class="flex" aria-label="Breadcrumb">
+        <ol role="list" class="flex items-center space-x-4">
+          <li>
+            <div>
+              <a href="#" class="block flex items-center text-gray-400 hover:text-gray-500">
+                <div class="bg-blue-500 rounded">
+                  <FlowchartIcon/>
+                </div>
+                <span class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Workflow 1</span>
+              </a>
+            </div>
+          </li>
+
+          <li>
+            <div class="flex items-center">
+              <svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+              </svg>
+              <div class="bg-blue-500 rounded">
+                <IfIcon/>
+              </div>
+              <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">If 1</a>
+            </div>
+          </li>
+
+          <li>
+            <div class="flex items-center">
+
+              <svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+              </svg>
+              <span class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700" aria-current="page">True</span>
+            </div>
+          </li>
+        </ol>
+      </nav>
+    </div>
   }
 }