diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts
index dc40a59e9..8bf947325 100644
--- a/src/designer/elsa-workflows-designer/src/components.d.ts
+++ b/src/designer/elsa-workflows-designer/src/components.d.ts
@@ -240,6 +240,7 @@ export namespace Components {
         "getCanvas": () => Promise<HTMLElsaCanvasElement>;
         "getWorkflowDefinition": () => Promise<WorkflowDefinition>;
         "importWorkflow": (workflowDefinition: WorkflowDefinition) => Promise<void>;
+        "loadWorkflowVersions": () => Promise<void>;
         "monacoLibPath": string;
         "newWorkflow": () => Promise<WorkflowDefinition>;
         "registerActivityDrivers": (register: (registry: ActivityDriverRegistry) => void) => Promise<void>;
diff --git a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/editor.tsx b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/editor.tsx
index 87b4f07c9..42f05afef 100644
--- a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/editor.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/editor.tsx
@@ -65,7 +65,6 @@ export class WorkflowDefinitionEditor {
   @Watch('workflowDefinition')
   async onWorkflowDefinitionChanged(value: WorkflowDefinition) {
     await this.importWorkflow(value);
-    await this.loadWorkflowVersions();
   }
 
   @Listen('resize', {target: 'window'})
@@ -122,7 +121,6 @@ export class WorkflowDefinitionEditor {
   @Method()
   async updateWorkflowDefinition(workflowDefinition: WorkflowDefinition): Promise<void> {
     this.workflowDefinitionState = workflowDefinition;
-    await this.loadWorkflowVersions();
   }
 
   @Method()
@@ -145,16 +143,33 @@ export class WorkflowDefinitionEditor {
     return workflowDefinition;
   }
 
-  loadWorkflowVersions = async () => {
+  @Method()
+  async loadWorkflowVersions(): Promise<void> {
     if(this.workflowDefinitionState.definitionId != null && this.workflowDefinitionState.definitionId.length > 0)
     {
-      this.workflowVersions = await this.workflowDefinitionApi.getVersions(this.workflowDefinitionState.definitionId);
+      const workflowVersions = await this.workflowDefinitionApi.getVersions(this.workflowDefinitionState.definitionId);
+      this.workflowVersions = workflowVersions.sort(x => x.version).reverse();
     }
     else {
       this.workflowVersions = [];
     }
   }
 
+  sortByProperty(property) {
+    var sortOrder = 1;
+    if(property[0] === "-") {
+        sortOrder = -1;
+        property = property.substr(1);
+    }
+    return function (a,b) {
+        /* next line works with strings and numbers, 
+         * and you may want to customize it to your needs
+         */
+        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
+        return result * sortOrder;
+    }
+}
+
   async componentWillLoad() {
     await this.updateWorkflowDefinition(this.workflowDefinition);
     await this.loadWorkflowVersions();
diff --git a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/version-history.tsx b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/version-history.tsx
index 70c7175e6..521ebbcfb 100644
--- a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/version-history.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/version-history.tsx
@@ -1,8 +1,7 @@
-import {Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from '@stencil/core';
+import {Component, Event, EventEmitter, h, Prop, Watch} from '@stencil/core';
 import {Container} from "typedi";
 import {EventBus} from "../../../services";
 import {WorkflowDefinition} from "../models/entities";
-import {VersionedEntity} from "../../../models";
 import {WorkflowDefinitionsApi} from "../../workflow-definitions/services/api";
 import {DeleteIcon, RevertIcon, PublishedIcon} from "../../../components/icons/tooling";
 import moment from "moment";
@@ -74,7 +73,7 @@ export class WorkflowDefinitionVersionHistory {
                     <button onClick={e => this.onViewVersionClick(e, v)}
                             type="button"
                             disabled={this.selectedVersion.version == v.version}
-                            class="btn btn-secondary">
+                            class={this.selectedVersion.version == v.version ? "btn btn-secondary" : "btn btn-primary"}>
                       View
                     </button>
                   </td>
@@ -83,7 +82,7 @@ export class WorkflowDefinitionVersionHistory {
                       <elsa-context-menu
                         menuItems={[
                           {text: 'Delete', clickHandler: e => this.onDeleteVersionClick(e, v), icon: <DeleteIcon/>},
-                          {text: 'Reverse', clickHandler: e => this.onRevertVersionClick(e, v), icon: <RevertIcon/>},
+                          {text: 'Revert', clickHandler: e => this.onRevertVersionClick(e, v), icon: <RevertIcon/>},
                         ]}
                       />
                     }
diff --git a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx
index 8652d36b1..d3777e32f 100644
--- a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx
+++ b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx
@@ -93,6 +93,7 @@ export class WorkflowDefinitionsPlugin implements Plugin {
   private saveWorkflowDefinition = async (definition: WorkflowDefinition, publish: boolean): Promise<WorkflowDefinition> => {
     const updatedWorkflow = await this.workflowDefinitionManager.saveWorkflow(definition, publish);
     await this.workflowDefinitionEditorElement.updateWorkflowDefinition(updatedWorkflow);
+    await this.workflowDefinitionEditorElement.loadWorkflowVersions();
     return updatedWorkflow;
   }
 
@@ -115,11 +116,16 @@ export class WorkflowDefinitionsPlugin implements Plugin {
       return;
     }
 
-    if(updatedWorkflowDefinition.version == e.detail.latestVersionNumber)
+    if(updatedWorkflowDefinition.version == e.detail.latestVersionNumber || updatedWorkflowDefinition.isPublished)
     {
       const currentWorkflowDefinition = await this.api.get({definitionId: updatedWorkflowDefinition.definitionId, versionOptions: {version: updatedWorkflowDefinition.version}});
       if(!isEqual(currentWorkflowDefinition.root.activities, updatedWorkflowDefinition.root.activities))
+      {   
+        if(updatedWorkflowDefinition.isPublished)
+          updatedWorkflowDefinition.version = e.detail.latestVersionNumber;
+        
         await this.saveWorkflowDefinition(updatedWorkflowDefinition, false);
+      }
     }
   }