diff --git a/README.md b/README.md
index 359e39cb..4075c47e 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Harena is available at https://harena.ds4h.org/.
 <!-- platform that includes: authoring environment, player engine and the Versum narrative scripting language translator. -->
 
 <!--
-## Table of Contents 
+## Table of Contents
 
 * [Getting Started](#getting-started)
   * [Option 1: Access our instance running at cloud](#option-1-access-our-instance-running-at-cloud)
diff --git a/src/adonisjs/public/author/index.html b/src/adonisjs/public/author/index.html
index 384db12a..ff7c7213 100644
--- a/src/adonisjs/public/author/index.html
+++ b/src/adonisjs/public/author/index.html
@@ -99,7 +99,11 @@
     <script src="/translator/translator.js"></script>
     <script src="/translator/item-templates.js"></script>
 
+    <script src="/dccs/edit/local-storage-stack.js"></script>
+    <script src="/dccs/edit/action-deserializer.js"></script>
+    <script src="/dccs/edit/command-manager.js"></script>
     <script src="/dccs/edit/properties.js"></script>
+    <script src="/dccs/edit/action-apply-properties.js"></script>
     <script src="/dccs/edit/upload-adapter.js"></script>
     <script src="/dccs/edit/inplace-editor.js"></script>
     <script src="/dccs/edit/inplace-plain-editor.js"></script>
@@ -347,6 +351,9 @@ <h6 style="color:#808080;">Created by {{author_grade}}: {{username}} ({{institut
               </button>
 
 
+              <dcc-button xstyle="in" topic="properties/undo/details" label="UNDO"></dcc-button>
+              <dcc-button xstyle="in" topic="properties/redo/details" label="REDO"></dcc-button>
+
               <div id="advanced-mode" style="display:none">
                 <dcc-button topic="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-button>
               </div>
@@ -431,7 +438,6 @@ <h6 style="color:#808080;">Created by {{author_grade}}: {{username}} ({{institut
                     <div id="properties-panel" class="styp-properties-panel"></div>
                     <div id="properties-buttons">
                        <dcc-button xstyle="in" topic="properties/apply/details" label="APPLY"></dcc-button>
-                       <dcc-button xstyle="in" topic="properties/undo/details" label="UNDO"></dcc-button>
                        <!--
                        <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-button></div>
                        <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-button></div>
diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js
index 15c6995a..b53c7269 100644
--- a/src/adonisjs/public/author/js/author.js
+++ b/src/adonisjs/public/author/js/author.js
@@ -42,12 +42,26 @@ class AuthorManager {
 
     this._caseModified = false
 
-    window.onbeforeunload = function () {
-      return (this._caseModified)
-        ? 'If you leave this page you will lose your unsaved changes.' : null
-    }
+// Function that runs when the user attempts to leave the page, making the user confirm before leaving
+// To use this uncomment the next two lines and  code and the tryHalt function.
+//    this.tryHalt = this.tryHalt.bind(this)
+//    window.onbeforeunload = this.tryHalt
+
+    this.commandManager = new CommandManager('caseEditor', this)
   }
 
+  /*  async tryHalt () {
+      try {
+      if (this._caseModified)
+          Tracker.caseTryHalt(pPlay.userid, pPlay.caseid, pPlay.running.runningId)
+      } catch (e) {
+        console.log('=== error on halt')
+        console.log(e)
+      }
+      return ''
+    }
+    */
+
   /* <TODO>
       A commom code for shared functionalities between player and author
       ******/
@@ -261,6 +275,8 @@ class AuthorManager {
   async caseLoadSelect () {
     const saved = await this.saveChangedCase()
 
+    this.commandManager.clear()
+
     const cases = await MessageBus.i.request('data/case/*/list', null, null, true)
     // {user: this._userid});
 
@@ -298,7 +314,7 @@ class AuthorManager {
     */
   async caseNew (template) {
     this._temporaryCase = true
-
+    this.commandManager.clear()
     // await this._themeSelect();
     // let template = await this._templateSelect("case");
 
@@ -814,7 +830,7 @@ class AuthorManager {
     console.log(topic)
     console.log(message)
 
-    await Properties.s.closePreviousProperties()
+    await Properties.s.closePreviousProperties(message._selectedByAction)
 
     const dccId = MessageBus.extractLevel(topic, 3)
 
@@ -845,9 +861,9 @@ class AuthorManager {
          dcc = inDCC
       }
       parentDCC.edit(role)
-
+      
       Properties.s.editElementProperties(
-        this._knots, this._knotSelected, el, dcc, role, message.buttonType)
+        this._knots, this._knotSelected, el, dcc, role, message.buttonType, message.presentationId, dccId, this.commandManager)
     }
   }
 
diff --git a/src/adonisjs/public/dccs/edit/action-apply-properties.js b/src/adonisjs/public/dccs/edit/action-apply-properties.js
new file mode 100644
index 00000000..08340ee9
--- /dev/null
+++ b/src/adonisjs/public/dccs/edit/action-apply-properties.js
@@ -0,0 +1,66 @@
+class ApplyPropertiesAction{
+  //Action that implements element edit operations.
+
+  constructor(knotId, el, newObjProperties, oldObjProperties = null, dccId, role, buttonType, presentationId){
+    this._oldObjProperties = oldObjProperties
+    this._objProperties = null
+    this.el = el
+    this._newObjProperties = JSON.parse(JSON.stringify(newObjProperties))
+    this.type = 'ApplyProperties'
+    this.knotId = knotId
+    this._dccId = dccId
+    this._role = role
+    this._buttonType = buttonType
+    this._presentationId = presentationId
+  }
+
+    async execute(knots){
+      //Get Object Properties and clone it into oldObjProperties for later use
+      this._objProperties = knots[this.knotId].content[this.el]
+      this._oldObjProperties = JSON.parse(JSON.stringify(this._objProperties))
+
+      //Update Object Properties,Markdown and view
+      knots[this.knotId].content[this.el] = this._newObjProperties
+      Translator.instance.updateElementMarkdown(this._newObjProperties)
+      await MessageBus.i.request('control/knot/update', null, null, true)
+    }
+
+
+    async undo(knots){
+      //Restore object to oldObjProperties
+      knots[this.knotId].content[this.el] = this._oldObjProperties
+      this._objProperties = knots[this.knotId].content[this.el]
+      this._objProperties._modified = true
+      await MessageBus.i.request('control/knot/update', null, null, true)
+    }
+
+    selectElement(){
+      //Create a element selected message to change the selected element upon undo/redo actions
+      let topic = 'control/element/' + this._dccId + '/selected'
+
+      let message = {}
+      message._selectedByAction = true
+      if (this._role != null){
+        message.role = this._role
+      }
+      if (this._buttonType != null){
+        message.buttonType = this._buttonType
+      }
+      if (this._presentationId != null){
+        message.presentationId = this._presentationId
+      }
+
+      MessageBus.i.publish(topic, message)
+    }
+
+    serialize(action){
+      action.type = this.type
+      return JSON.stringify(action)
+    }
+
+    static deserialize(properties){
+      return new ApplyPropertiesAction(properties.knotId, properties.el, properties._newObjProperties, properties._oldObjProperties,
+                                       properties._dccId,properties._role, properties._buttonType, properties.presentationId)
+    }
+
+}
diff --git a/src/adonisjs/public/dccs/edit/action-deserializer.js b/src/adonisjs/public/dccs/edit/action-deserializer.js
new file mode 100644
index 00000000..b8c07556
--- /dev/null
+++ b/src/adonisjs/public/dccs/edit/action-deserializer.js
@@ -0,0 +1,11 @@
+class ActionDeserializer{
+  static deserialize(action){
+    let properties = JSON.parse(action)
+    switch (properties.type) {
+      case 'ApplyProperties':
+        action = ApplyPropertiesAction.deserialize(properties)
+        break
+    }
+    return action
+  }
+}
diff --git a/src/adonisjs/public/dccs/edit/command-manager.js b/src/adonisjs/public/dccs/edit/command-manager.js
new file mode 100644
index 00000000..5625ecb4
--- /dev/null
+++ b/src/adonisjs/public/dccs/edit/command-manager.js
@@ -0,0 +1,51 @@
+class CommandManager{
+  //This Class is resposible for calling and managing actions. The Undo/Redo feature is here implemented by using the LocalStorageStack class to controll the
+  //undo and redo stacks so that the actions are stored in the brower local memory of the users computer and can later be retrieved.
+  constructor (editorName, author) {
+    //Create stacks and instatiate author
+    this._undoStack = new LocalStorageStack(editorName + 'UndoStack')
+    this._redoStack = new LocalStorageStack(editorName + 'RedoStack')
+    this._author = author
+  };
+
+  execute(action) {
+    //Call the execute item, push the action to the undo stack and clear the redo stack
+    this.knots = this._author._compiledCase.knots
+    action.execute(this.knots)
+    this._undoStack.push(action.serialize(action))
+    this._redoStack.clear()
+  }
+
+  undo(){
+    //Get the top item from the undo stack, add it on the redo stack, select the element and undo the action.
+    this.knots = this._author._compiledCase.knots
+    if(this._undoStack.length > 0){
+      let action = this._undoStack.pop()
+      this._redoStack.push(action)
+      action = ActionDeserializer.deserialize(action)
+      action.selectElement()
+      action.undo(this.knots)
+    }
+  }
+
+  redo(){
+    //Get the top action from the redo stack, add it to the undo stack, select the element and execute the action.
+    this.knots = this._author._compiledCase.knots
+    if(this._redoStack.length > 0){
+      let action = this._redoStack.pop()
+      this._undoStack.push(action)
+      action = ActionDeserializer.deserialize(action)
+      action.selectElement()
+      action.execute(this.knots)
+    }
+  }
+
+  clear(){
+    //Clear stacks and pointers to them.
+    this._undoStack.clear()
+    this._redoStack.clear()
+    this._undoStack = null
+    this._redoStack = null
+  }
+
+}
diff --git a/src/adonisjs/public/dccs/edit/inplace-editor.js b/src/adonisjs/public/dccs/edit/inplace-editor.js
index a5afb342..9b08a417 100644
--- a/src/adonisjs/public/dccs/edit/inplace-editor.js
+++ b/src/adonisjs/public/dccs/edit/inplace-editor.js
@@ -30,16 +30,16 @@ class EditDCC {
     return ep
   }
 
-  async handleConfirm () {
-    await this._handleEditorAction('confirm')
+  async handleConfirm (selectedByAction) {
+    await this._handleEditorAction('confirm', selectedByAction)
   }
 
   async handleCancel () {
     await this._handleEditorAction('cancel')
   }
 
-  async _handleEditorAction (action) {
-    if (action === 'confirm') {
+  async _handleEditorAction (action, selectedByAction) {
+    if (action === 'confirm' && !selectedByAction) {
       await this._properties.applyProperties(false)
       // await MessageBus.i.request('properties/apply/short', null, null, true)
     } else {
diff --git a/src/adonisjs/public/dccs/edit/inplace-plain-editor.js b/src/adonisjs/public/dccs/edit/inplace-plain-editor.js
index 52d0fe54..cec1a8d4 100644
--- a/src/adonisjs/public/dccs/edit/inplace-plain-editor.js
+++ b/src/adonisjs/public/dccs/edit/inplace-plain-editor.js
@@ -14,15 +14,16 @@ class EditDCCPlain {
     }
   }
 
-  async handleConfirm () {
+  async handleConfirm (selectedByAction) {
     this._editElement.contentEditable = false
     // <TODO> this will becone an action
     this._objProperties[this._objField] =
            this._editElement.innerHTML.trim()
              .replace(/\u200B/gm, '') // removing non printable special characters
              .replace(/(?:<br>)+$/i, '')
-
-    await this._properties.applyProperties(false)
+    if(!selectedByAction){
+      await this._properties.applyProperties(false)
+    }
   }
 
   // <FUTURE>?
diff --git a/src/adonisjs/public/dccs/edit/inplace-text-editor.js b/src/adonisjs/public/dccs/edit/inplace-text-editor.js
index ff0d0cf1..c17409d9 100644
--- a/src/adonisjs/public/dccs/edit/inplace-text-editor.js
+++ b/src/adonisjs/public/dccs/edit/inplace-text-editor.js
@@ -135,9 +135,11 @@ class EditDCCText extends EditDCC {
     // MessageBus.i.publish('control/knot/update', null, true)
   }
 
-  async handleConfirm() {
-    this._updateTranslated()
-    await this._closeEditor()
+  async handleConfirm(selectedByAction) {
+    if(!selectedByAction){
+      this._updateTranslated()
+      await this._closeEditor()
+    }
   }
 
   async handleCancel() {
diff --git a/src/adonisjs/public/dccs/edit/local-storage-stack.js b/src/adonisjs/public/dccs/edit/local-storage-stack.js
new file mode 100644
index 00000000..8770b1d8
--- /dev/null
+++ b/src/adonisjs/public/dccs/edit/local-storage-stack.js
@@ -0,0 +1,41 @@
+class LocalStorageStack{
+  //Class that simulates stack operations for using the local storage key-value database.
+  //The length of the stack is stored in a item with it's name, the items are stored in a item named stackName + length
+  constructor(stackName){
+    //Get item with stack name to get the stored stack if it exists, otherwise create a stack with this name and store 0 as length.
+    this._stackName = stackName
+    this.length = localStorage.getItem(stackName)
+    if(this.length == null){
+      this.length = 0
+      localStorage.setItem(stackName, 0)
+    }
+  }
+
+  push(item){
+    //push item, increase length and store it
+    localStorage.setItem(this._stackName + this.length.toString(), item)
+    this.length++
+    localStorage.setItem(this._stackName, this.length)
+  }
+
+  pop(){
+    //Get top item, descrease length and store it
+    let item = null
+    if(this.length > 0){
+      this.length--
+      localStorage.setItem(this._stackName, this.length)
+      item = localStorage.getItem(this._stackName + this.length.toString())
+      localStorage.removeItem(this._stackName + this.length.toString())
+    }
+    return item
+  }
+
+  clear(){
+    //Remove all items from the stack and it's length
+    while(this.length > 0){
+      this.length--
+      localStorage.removeItem(this._stackName + this.length.toString())
+    }
+    localStorage.removeItem(this._stackName)
+  }
+}
diff --git a/src/adonisjs/public/dccs/edit/properties.js b/src/adonisjs/public/dccs/edit/properties.js
index c7a5e28b..07c78e68 100644
--- a/src/adonisjs/public/dccs/edit/properties.js
+++ b/src/adonisjs/public/dccs/edit/properties.js
@@ -7,8 +7,15 @@
 class Properties {
   constructor () {
     this.applyPropertiesDetails = this.applyPropertiesDetails.bind(this)
+    this.undo = this.undo.bind(this)
+    this.redo = this.redo.bind(this)
     MessageBus.i.subscribe('properties/apply/details',
       this.applyPropertiesDetails)
+    MessageBus.i.subscribe('properties/undo/details',
+      this.undo)
+    MessageBus.i.subscribe('properties/redo/details',
+        this.redo)
+    this._knotid = null
   }
 
   attachPanelDetails (panel) {
@@ -23,9 +30,9 @@ class Properties {
     this._artifacts = artifacts
   }
 
-  async closePreviousProperties () {
+  async closePreviousProperties (selectedByAction = false) {
     if (this._editor != null)
-      await this._editor.handleConfirm()
+      await this._editor.handleConfirm(selectedByAction)
   }
 
   editKnotProperties (obj, knotId) {
@@ -37,8 +44,16 @@ class Properties {
     */
   }
 
-  editElementProperties (knots, knotid, el, dcc, role, buttonType) {
+  editElementProperties (knots, knotid, el, dcc, role, buttonType, presentationId, dccId, commandManager) {
     this._knots = knots
+    this._knotid = knotid
+    this._el = el
+    this._commandManager = commandManager
+    this._buttonType = buttonType
+    this._role = role
+    this._presentationId = presentationId
+    this._dccId = dccId
+
     const knotContent = knots[knotid].content
     const element = dcc.currentPresentation()
     const obj = knotContent[el]
@@ -54,7 +69,7 @@ class Properties {
       if (this._editor != null && this._editor.closeEditor) { this._editor.closeEditor() }
       switch (editp.inlineProfile.type) {
         case 'void':
-          this._editor = new EditDCCPlain(obj, dcc, editp.htmls, this)
+          this._editor = new EditDCCPlain(obj, dcc, editp.htmls, editp.inlineProperty, this)
           break
         case 'text':
           this._editor = new EditDCCText(knotContent, el, dcc, svg, false, this,
@@ -106,7 +121,6 @@ class Properties {
     */
   editProperties (obj, role, buttonType) {
     this._objProperties = obj
-    this._buttonType = buttonType
 
     const profile = this._typeProfile(obj)[buttonType]
     let seq = 1
@@ -247,29 +261,38 @@ class Properties {
     }
   }
 
+  undo(){
+    this._commandManager.undo()
+  }
+  redo(){
+    this._commandManager.redo()
+  }
+
   async applyPropertiesDetails (topic, message) {
-    this.applyProperties(true)
+    this.applyProperties(true, true)
   }
 
-  async applyProperties (details) {
+  async applyProperties (details, sidebar = false) {
     const sufix = (details) ? '_d' : '_s'
     const panel = (details)
       ? this._panelDetails : this._editor.editorExtended
     if (this._objProperties) {
-      /* clone the object */
-      const profile = this._typeProfile(this._objProperties)[this._buttonType]
+      let objectPropertiesClone = this._objProperties
+      if(sidebar){
+        objectPropertiesClone = JSON.parse(JSON.stringify(this._objProperties))
+      }
+
+      const profile = this._typeProfile(objectPropertiesClone)[this._buttonType]
       let seq = 1
-      /* all changes will be on the clone */
       for (const p in profile) {
         if (profile[p].type != 'void') {
           if (!profile[p].composite) {
             if (details ||
                 (profile[p].visual && profile[p].visual.includes('panel'))) {
-              /* adjust _applySingleProperty to avoid changing the objProperty */
               const objProperty =
                         await this._applySingleProperty(profile[p],
-                          seq, panel, sufix, this._objProperties[p])
-              if (objProperty != null) { this._objProperties[p] = objProperty }
+                          seq, panel, sufix, objectPropertiesClone)
+              if (objProperty != null) { objectPropertiesClone[p] = objProperty}
             }
             seq++
           } else {
@@ -278,47 +301,52 @@ class Properties {
                          profile[p].visual.includes('panel'))) {
                 const objProperty = await this._applySingleProperty(
                   profile[p].composite[s], seq, panel, sufix,
-                  this._objProperties[p])
+                  objectPropertiesClone[p])
                 if (objProperty != null &&
                             (typeof objProperty !== 'string' ||
                               objProperty.trim().length > 0)) {
-                  if (!this._objProperties[p]) { this._objProperties[p] = {} }
-                  this._objProperties[p][s] = objProperty
+                  if (!objectPropertiesClone[p]) { objectPropertiesClone[p] = {} }
+                  objectPropertiesClone[p][s] = objProperty
                 }
               }
               seq++
             }
           }
-        }
+            }
       }
+      if(sidebar){
+        //Create and execute action
+        const action = new ApplyPropertiesAction(this._knotid, this._el, objectPropertiesClone, null,
+                                                 this._dccId,this._role, this._buttonType, this.presentationId)
+        this._commandManager.execute(action)
+      }
+      else{
+        //TODO : make this form of editing be done with the commandManager, by removing if(sidebar) and this else block and make nescessary adaptations.
+        
+        Translator.instance.updateElementMarkdown(this._objProperties)
 
-      // transfer this operation to command
-      Translator.instance.updateElementMarkdown(this._objProperties)
-
-      if (this._knotOriginalTitle &&
-             this._knotOriginalTitle != this._objProperties.title) {
-        MessageBus.i.publish('control/knot/rename',
+       if (this._knotOriginalTitle && this._knotOriginalTitle != this._objProperties.title) {
+          MessageBus.i.publish('control/knot/rename',
           this._objProperties.title, true)
-        delete this._knotOriginalTitle
+          delete this._knotOriginalTitle
+      }
+        await this.closeProperties(details)
       }
     }
-    await this.closeProperties(details)
   }
 
-  async closeProperties(details) {
-    if (this._editor != null)
-      this._editor = null
-    if (this._objProperties) {
-      delete this._objProperties
-      await MessageBus.i.request('control/knot/update', null, null, true)
-    }
-    // if (!details) {MessageBus.i.publish(MessageBus.buildResponseTopic(topic, message), null, true) }
+   async closeProperties(details) {
+     if (this._editor != null)
+       this._editor = null
+     if (this._objProperties) {
+       this._objProperties = null
+       await MessageBus.i.request('control/knot/update', null, null, true)
+     }
+     // if (!details) {MessageBus.i.publish(MessageBus.buildResponseTopic(topic, message), null, true) }
   }
 
   async _applySingleProperty (property, seq, panel, sufix, previous) {
     let objProperty = null
-    console.log('=== property')
-    console.log('#pfield' + seq + sufix)
     const field = (panel != null) ?
          panel.querySelector('#pfield' + seq + sufix) : null
     switch (property.type) {
@@ -327,8 +355,6 @@ class Properties {
       case 'textField':
       case 'variable':
         if (field == 'variable') {
-          console.log('=== variable')
-          console.log(field.value)
         }
         if (field != null) {
           const value = field.value.trim()
@@ -352,7 +378,7 @@ class Properties {
           if (i == this._item) {
             if (this._itemEdit.edit.trim().length > 0) {
               if (field != null)
-                previous[item].message = field.value.trim()  // correct this sentence
+                previous[item].message = field.value.trim()
               objProperty[this._itemEdit.edit] = previous[item]
             }
           } else { objProperty[item] = previous[item] }