diff --git a/src/adonisjs/app/Controllers/Http/CaseController.js b/src/adonisjs/app/Controllers/Http/CaseController.js
index 268e2292a..3d5b9d8dc 100644
--- a/src/adonisjs/app/Controllers/Http/CaseController.js
+++ b/src/adonisjs/app/Controllers/Http/CaseController.js
@@ -60,7 +60,9 @@ class CaseController {
             specialty: params.specialty,
             keywords: params.keywords,
             source: markdown,
-            original_date: params.creationDate
+            original_date: params.creationDate,
+            complexity: params.complexity,
+            institution: params.institution
           },
           headers: {
             Authorization: 'Bearer ' + token
@@ -130,6 +132,7 @@ class CaseController {
 
   async update ({ request, session, response }) {
     try {
+      console.log('update ---------------------------- ')
       const params = request.all()
       // console.log('UPDATE STARTING........')
       const endpointUrl =
@@ -147,6 +150,8 @@ class CaseController {
           specialty: params.specialty,
           keywords: params.keywords,
           originalDate: params.originalDate,
+          complexity: params.complexity,
+          institution: params.institution,
           source: params.source
         },
         headers: {
@@ -193,10 +198,12 @@ class CaseController {
           const caseSpecialty = responseContent.specialty
           const caseKeywords = responseContent.keywords
           const caseOriginalDate = responseContent.original_date
+          const caseComplexity = responseContent.complexity
+
           const caseSource = responseContent.source.replace(/"/gm, '\\"')
 
           return view.render('author.author',
-            { caseId, caseTitle, caseDescription, caseLanguage, caseInstitution, caseDomain, caseSpecialty, caseKeywords, caseOriginalDate, caseSource })
+            { caseId, caseTitle, caseDescription, caseLanguage, caseInstitution, caseDomain, caseSpecialty, caseKeywords, caseOriginalDate, caseSource, caseComplexity })
         })
         .catch(function (error) {
           console.log(error)
@@ -223,6 +230,7 @@ class CaseController {
 
       await axios(config)
         .then(function (endpointResponse) {
+          console.log('here')
           console.log(endpointResponse.data)
           // return view.render('author.author')
 
diff --git a/src/adonisjs/app/Controllers/Http/QuestController.js b/src/adonisjs/app/Controllers/Http/QuestController.js
index 1b1f378b1..42a911362 100644
--- a/src/adonisjs/app/Controllers/Http/QuestController.js
+++ b/src/adonisjs/app/Controllers/Http/QuestController.js
@@ -5,95 +5,107 @@ const axios = use('axios')
 const view = use('View')
 
 class QuestController {
-  async getCasesByQuestAuthor({ request, response }) {
-		try{
-			const params = request.all()
-			console.log('------------------------COR DA QUEST');
-			console.log(params.color);
-			var responseData = [];
-			let endpoint_url = Env.get("HARENA_MANAGER_URL") + "/api/v1/author/quest/cases"
-
-			var config = {
-				method: 'get',
-				url: endpoint_url,
-				data: {
-					questId: params.id
-				},
-				headers: {
-					'Authorization': 'Bearer ' + request.cookie('token')
-				}
-			};
-
-
-			await axios(config)
-			.then(function (endpoint_response) {
-				console.log('============ Retrieving cases for selected quests');
-				console.log(endpoint_response.data);
-				const busResponse = []
-				for (const c in endpoint_response.data) {
-					busResponse.push({
-						id: endpoint_response.data[c].id,
-						title: endpoint_response.data[c].title,
-
-					})
-
-				}
-				responseData[0] = busResponse;
-			})
-
-			.catch(function (error) {
-				console.log(error);
-			});
-		} catch(e){
-			console.log(e)
-		}
-
-		return view.render('author.drafts-cases', { cases: responseData[0]});
-
-	}
-
-async getQuestsAuthor({ request, response }) {
-		try{
-			var responseData = [];
-			let endpoint_url = Env.get("HARENA_MANAGER_URL") + "/api/v1/author/quests"
-
-			var config = {
-				method: 'get',
-				url: endpoint_url,
-				headers: {
-					'Authorization': 'Bearer ' + request.cookie('token')
-				}
-			};
-
-
-			await axios(config)
-			.then(function (endpoint_response) {
-				console.log('============ Retrieving quests');
-				console.log(endpoint_response.data);
-				const busResponse = []
-				for (const c in endpoint_response.data) {
-					busResponse.push({
-						id: endpoint_response.data[c].id,
-						title: endpoint_response.data[c].title,
-						color: endpoint_response.data[c].color,
-						url: endpoint_response.data[c].url,
-
-					})
-
-				}
-				responseData[0] = busResponse;
-			})
-
-			.catch(function (error) {
-				console.log(error);
-			});
-		} catch(e){
-			console.log(e)
-		}
-
-		return view.render('author.drafts-quest', { quests: responseData[0]});
-
-	}
+  async getCasesByQuestAuthor ({ request, response }) {
+    try {
+      const params = request.all()
+
+      // console.log('------------------------COR DA QUEST')
+      // console.log(params.color)
+      var responseData = []
+      const endpoint_url = Env.get('HARENA_MANAGER_URL') + '/api/v1/author/quest/cases'
+
+      var config = {
+        method: 'get',
+        url: endpoint_url,
+        data: {
+          questId: params.id
+        },
+        headers: {
+          'Authorization': 'Bearer ' + request.cookie('token')
+        }
+      }
+      
+      await axios(config)
+        .then(function (endpoint_response) {
+          console.log('============ Retrieving cases for selected quests')
+          console.log(endpoint_response.data)
+          const busResponse = []
+          for (const c in endpoint_response.data) {
+            busResponse.push({
+              id: endpoint_response.data[c].id,
+              title: endpoint_response.data[c].title
+
+            })
+          }
+
+          function sortAlphabetically (a, b) {
+            if (a.title < b.title) {
+              return -1
+            }
+            if (a.title > b.title) {
+              return 1
+            }
+            return 0
+          }
+          responseData[0] = busResponse.sort(sortAlphabetically)
+
+        })
+
+        .catch(function (error) {
+          console.log(error)
+        })
+    } catch (e) {
+      console.log(e)
+    }
+
+    return view.render('author.drafts-cases', { cases: responseData[0] })
+
+  }
+
+  async getQuestsAuthor ({ request, response }) {
+    try {
+      var responseData = []
+
+      let endpoint_url = Env.get("HARENA_MANAGER_URL") + "/api/v1/author/quests"
+
+      var config = {
+        method: 'get',
+        url: endpoint_url,
+        headers: {
+
+          'Authorization': 'Bearer ' + request.cookie('token')
+        }
+      }
+
+      await axios(config)
+        .then(function (endpoint_response) {
+          console.log('============ Retrieving quests')
+          console.log(endpoint_response.data)
+          const busResponse = []
+          for (const c in endpoint_response.data) {
+            busResponse.push({
+              id: endpoint_response.data[c].id,
+              title: endpoint_response.data[c].title,
+              color: endpoint_response.data[c].color,
+              url: endpoint_response.data[c].url,
+
+            })
+
+          }
+          responseData[0] = busResponse
+        })
+
+        .catch(function (error) {
+          console.log(error)
+        })
+
+    } catch (e) {
+
+      console.log(e)
+    }
+
+    return view.render('author.drafts-quest', { quests: responseData[0] })
+  }
 
   async getCasesByQuest ({ request, response }) {
     try {
diff --git a/src/adonisjs/public/author/css/author.css b/src/adonisjs/public/author/css/author.css
index b7c29ebfd..ff74dac43 100644
--- a/src/adonisjs/public/author/css/author.css
+++ b/src/adonisjs/public/author/css/author.css
@@ -1,5 +1,15 @@
 @charset "UTF-8";
 
+#inplace-editor-wrapper{
+
+	border-color: #004270;
+	border-radius: 9px;
+	border-style: solid;
+	border-width: 13px;
+  border-bottom-width: 30px;
+
+}
+
 .sty-main-panel {
    /* the main box (body) occupies all the visible area */
    position: absolute;
@@ -133,8 +143,8 @@
 }
 
 .sty-knot-panel {
-   flex: 55%;
-   min-width: 20%;
+   /* flex: 55%;
+   min-width: 20%; */
    overflow: scroll;
    height: 100%;
 }
@@ -175,6 +185,11 @@
    overflow: hidden;
    display: flex;
    flex-direction: column;
+
+
+	 z-index: 2;
+	 position: relative;
+
 }
 
 /*
diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js
index 77d92b32a..fa75e6179 100644
--- a/src/adonisjs/public/author/js/author.js
+++ b/src/adonisjs/public/author/js/author.js
@@ -91,7 +91,7 @@ class AuthorManager {
       caseid = params.match(/id=([\w-]+)/i)
       caseid = (caseid == null) ? null : caseid[1]
     }
-    if (mode != null && mode.toLowerCase() == 'advanced') { document.querySelector('#advanced-mode').style.display = 'initial' }
+    if (mode != null && mode.toLowerCase() === 'advanced') { document.querySelector('#advanced-mode').style.display = 'initial' }
 
     // build singletons
     Panels.start()
@@ -201,7 +201,7 @@ class AuthorManager {
           break
         case 'control/leave/drafts': await this.caseSave()
         // window.location.href = 'draft.html';
-          window.location.href = '/drafts'
+          window.location.href = '/drafts/quests'
           break
       }
     }
@@ -223,7 +223,7 @@ class AuthorManager {
       'Select a case to load or start a new case.',
       'list', 'Select', 'New', cases.message)
 
-    if (caseId == 'New') { this.caseNew() } else { this._caseLoad(caseId) }
+    if (caseId === 'New') { this.caseNew() } else { this._caseLoad(caseId) }
 
     /*
       const sticky = document.querySelector("#sticky-top");
@@ -401,20 +401,20 @@ class AuthorManager {
   _checkKnotModification (nextState) {
     // (1) render slide; (2) edit knot; (3) edit case
     let modified = false
-    if (this._renderState == 2) {
+    if (this._renderState === 2) {
       if (this._editor != null) {
         const editorText = this._retrieveEditorText()
-        if (this._knots[this._knotSelected]._source != editorText) {
+        if (this._knots[this._knotSelected]._source !== editorText) {
           modified = true
           this._knots[this._knotSelected]._source = editorText
           Translator.instance.extractKnotAnnotations(this._knots[this._knotSelected])
           Translator.instance.compileKnotMarkdown(this._knots, this._knotSelected)
         }
       }
-    } else if (this._renderState == 3) {
+    } else if (this._renderState === 3) {
       if (this._editor != null) {
         const editorText = this._retrieveEditorText()
-        if (!this._originalMd || this._originalMd != editorText) {
+        if (!this._originalMd || this._originalMd !== editorText) {
           modified = true
           if (nextState != 3) { delete this._originalMd }
           this._compile(editorText)
@@ -461,7 +461,7 @@ class AuthorManager {
     // this._removeFloatingMenu();
     // let knotid = MessageBus.extractLevel(topic, 3);
     const knotid =
-         (message == null || message == '') ? this._knotSelected : message
+         (message == null || message === '') ? this._knotSelected : message
     if (knotid != null) {
       /*
          console.log("=== miniatureF");
diff --git a/src/adonisjs/public/author/js/dcc-author-server-proxy.js b/src/adonisjs/public/author/js/dcc-author-server-proxy.js
index 6b43fcda3..74d820afa 100644
--- a/src/adonisjs/public/author/js/dcc-author-server-proxy.js
+++ b/src/adonisjs/public/author/js/dcc-author-server-proxy.js
@@ -179,6 +179,8 @@ class DCCAuthorServer {
           domain: document.getElementById('domain').value,
           specialty: document.getElementById('specialty').value,
           keywords: document.getElementById('keywords').value,
+          institution: document.getElementById('institution').value,
+          complexity: document.getElementById('complexity').value,
           source: message.source
         },
         headers: {
diff --git a/src/adonisjs/public/author/js/draft.js b/src/adonisjs/public/author/js/draft.js
index 4b259f0fe..adc9cd0ac 100644
--- a/src/adonisjs/public/author/js/draft.js
+++ b/src/adonisjs/public/author/js/draft.js
@@ -20,8 +20,8 @@ class DraftManager {
 
     this._boxesPanel = document.querySelector('#case-boxes')
     // this._draftSelect(authorState.userid, advanced);
-    document.getElementsByClassName('buttons-container').length > 0 ?
-      this._draftQuestCasesSelect(advanced) : this._draftSelect(advanced)
+    document.getElementsByClassName('buttons-container').length > 0
+      ? this._draftQuestCasesSelect(advanced) : this._draftSelect(advanced)
   }
 
   async _draftSelect (advanced) {
@@ -50,13 +50,13 @@ class DraftManager {
           Basic.service.authorPropertyStore('caseId', this.id.substring(1))
           // window.location.href = "http://0.0.0.0:10010/author/author.html";
           window.location.href =
-                  'author?id=' + this.id.substring(1)
+                  '/author?id=' + this.id.substring(1)
         }
       )
       previewButton.addEventListener('click',
         function () {
           Basic.service.authorPropertyStore('caseId', this.id.substring(1))
-          window.location.href = 'player/case?id=' +
+          window.location.href = '/player/case?id=' +
                                       this.id.substring(1) +
                                       '&preview'
         }
diff --git a/src/adonisjs/public/dccs/components/dcc-visual.js b/src/adonisjs/public/dccs/components/dcc-visual.js
index bb6e234be..868758ab8 100644
--- a/src/adonisjs/public/dccs/components/dcc-visual.js
+++ b/src/adonisjs/public/dccs/components/dcc-visual.js
@@ -73,7 +73,7 @@ class DCCVisual extends DCCBase {
   }
 
   _attachTriggerPresentation (event, trigger, presentation) {
-    if (event == 'click') { presentation.style.cursor = 'pointer' }
+    if (event === 'click') { presentation.style.cursor = 'pointer' }
     presentation.addEventListener(event, trigger)
   }
 
diff --git a/src/adonisjs/public/dccs/css/dccs.css b/src/adonisjs/public/dccs/css/dccs.css
index 30f577352..77c846723 100644
--- a/src/adonisjs/public/dccs/css/dccs.css
+++ b/src/adonisjs/public/dccs/css/dccs.css
@@ -1,5 +1,13 @@
 @charset "UTF-8";
 
+.editor-container{
+  position: absolute;
+  overflow: auto;
+  max-width: 95% !important;
+  max-height: 85% !important;
+  z-index: 1;
+}
+
 .ql-hl-select {
    width: 6.3rem;
 }
@@ -36,7 +44,10 @@
 }
 
 .inplace-editor-floating {
-   position: absolute;
+   position: sticky;
+	 top: 5px;
+	 z-index: 2;
+
    background-color: white;
    border-radius: 1px;
    box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.5);
@@ -45,6 +56,9 @@
 
 .inplace-editor {
    background-color: white;
+   position: relative;
+   height: 100% !important;
+   weight: 100% !important;
    overflow: hidden;
 }
 
@@ -63,4 +77,4 @@
    flex-direction: row;
    justify-content: flex-end;
    cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/src/adonisjs/public/dccs/css/properties.css b/src/adonisjs/public/dccs/css/properties.css
index e7c74f90c..d6dc28a43 100644
--- a/src/adonisjs/public/dccs/css/properties.css
+++ b/src/adonisjs/public/dccs/css/properties.css
@@ -4,7 +4,7 @@
    flex: 95%;
    width: auto;
    height: 95%;
-   overflow: scroll;
+   /* overflow: scroll; */
    display: flex;
    flex-direction: column;
    padding: 5px;
@@ -43,7 +43,8 @@
 }
 
 .styp-field-text {
-   width: 600px;
+   width: 550px;
+   margin: 3px;
 }
 
 .styp-field-highlight {
diff --git a/src/adonisjs/public/dccs/edit/inplace-editor.js b/src/adonisjs/public/dccs/edit/inplace-editor.js
index 6bc57ee46..bc1ecaaf2 100644
--- a/src/adonisjs/public/dccs/edit/inplace-editor.js
+++ b/src/adonisjs/public/dccs/edit/inplace-editor.js
@@ -9,6 +9,7 @@ class EditDCC {
     this._editElement = presentation
     this._editorExtended = null
     this._editorWrapper = this._fetchEditorWrapper()
+    this._editorContainer = this._fetchEditorContainer()
     this._containerRect = this._editorWrapper.getBoundingClientRect()
     this._elementWrapper = this._fetchElementWrapper()
     this._elementWrapperRect = this._elementWrapper.getBoundingClientRect()
@@ -27,7 +28,7 @@ class EditDCC {
   }
 
   async _handleEditorAction (action) {
-    if (action == 'confirm') { await MessageBus.ext.request('properties/apply/short') } else if (this._editDCC != null) { this._editDCC.reactivateAuthor() }
+    if (action === 'confirm') { await MessageBus.ext.request('properties/apply/short') } else if (this._editDCC != null) { this._editDCC.reactivateAuthor() }
     this.closeEditor()
   }
 
@@ -38,7 +39,7 @@ class EditDCC {
     }
   }
 
-  // fetches the editor wrapper
+  // fetches the editor container
   _fetchEditorWrapper () {
     let container = document
     if (window.parent && window.parent.document) {
@@ -49,6 +50,18 @@ class EditDCC {
     return container
   }
 
+  // fetches the editor container
+  _fetchEditorContainer () {
+    if (!document.querySelector('.editor-container')) {
+      this._editorContainer = document.createElement('div')
+      this._editorContainer.classList.add('editor-container')
+      this._editorWrapper.appendChild(this._editorContainer)
+    }else {
+      this._editorContainer = document.querySelector('.editor-container')
+    }
+    return this._editorContainer
+  }
+
   // fetches the element wrapper
   _fetchElementWrapper () {
     // looks for a knot-wrapper or equivalent
@@ -76,12 +89,12 @@ class EditDCC {
     this._editorToolbar.classList.add('inplace-editor-floating')
     this._editorToolbar.innerHTML = html
 
-    this._editorToolbar.style.left = this._transformRelativeX(
-      this._elementWrapperRect.left - this._containerRect.left)
-    this._editorToolbar.style.bottom = this._transformRelativeY(
-      this._containerRect.height -
-            (this._elementWrapperRect.top - this._containerRect.top))
-    this._editorWrapper.appendChild(this._editorToolbar)
+    // this._editorToolbar.style.left = this._transformRelativeX(
+    //   this._elementWrapperRect.left - this._containerRect.left)
+    // this._editorToolbar.style.bottom = this._transformRelativeY(
+    //   this._containerRect.height -
+    //         (this._elementWrapperRect.top - this._containerRect.top))
+    this._fetchEditorContainer().appendChild(this._editorToolbar)
   }
 
   _removeToolbarPanel () {
@@ -115,7 +128,10 @@ class EditDCC {
   async _extendedPanel (html, modality) {
     this._editorExtended =
          this._buildExtendedPanel(html, modality)
-    this._editorWrapper.appendChild(this._editorExtended)
+
+    this._fetchEditorContainer().appendChild(this._editorExtended)
+    this._editDCC.parentNode.insertBefore(this._fetchEditorContainer(), this._editDCC.nextSibling)
+    this._editDCC._presentation.focus()
 
     const promise = new Promise((resolve, reject) => {
       const callback = function (button) { resolve(button) }
@@ -141,7 +157,7 @@ class EditDCC {
 
   _removeExtendedPanel () {
     if (this._editorExtended != null) {
-      this._editorWrapper.removeChild(this._editorExtended)
+      this._editorContainer.removeChild(this._editorExtended)
       this._editorExtended = null
     }
   }
@@ -151,27 +167,28 @@ class EditDCC {
     panelExtended.classList.add('inplace-editor-floating')
     panelExtended.innerHTML = html
 
-    panelExtended.style.left = this._transformRelativeX(
-      this._elementRect.left - this._containerRect.left)
+    // panelExtended.style.left = this._transformRelativeX(
+    //   this._elementRect.left - this._containerRect.left)
 
     // tests the middle of the element against the middle of the container
-    if (modality != 'properties' ||
-          (this._elementRect.top + (this._elementRect.height / 2) >
-           this._containerRect.top + (this._containerRect.height / 2))) {
-      panelExtended.style.bottom = this._transformRelativeY(
-        this._containerRect.height -
-            (this._elementRect.top - this._containerRect.top))
-    } else {
-      panelExtended.style.top =
-            this._transformRelativeY(this._elementRect.bottom - this._containerRect.top)
-    }
+    // if (modality != 'properties' ||
+    //       (this._elementRect.top + (this._elementRect.height / 2) >
+    //        this._containerRect.top + (this._containerRect.height / 2))) {
+    //   panelExtended.style.bottom = this._transformRelativeY(
+    //     this._containerRect.height -
+    //         (this._elementRect.top - this._containerRect.top))
+    // } else {
+    //   panelExtended.style.top =
+    //         this._transformRelativeY(this._elementRect.bottom - this._containerRect.top)
+    // }
 
     this._extendedSub = {
       cancel: panelExtended.querySelector('#ext-cancel'),
       content: panelExtended.querySelector('#ext-content')
     }
-    if (modality == 'image') { this._extendedSub.image = panelExtended.querySelector('#ext-content') } else { this._extendedSub.confirm = panelExtended.querySelector('#ext-confirm') }
-
+    if (modality === 'image') {
+      this._extendedSub.image = panelExtended.querySelector('#ext-content')
+    } else { this._extendedSub.confirm = panelExtended.querySelector('#ext-confirm') }
     return panelExtended
   }
 
@@ -179,7 +196,7 @@ class EditDCC {
     const ep = await this._extendedPanel(
       EditDCC.imageBrowseTemplate, 'image')
     let path = null
-    if (ep.clicked == 'confirm' && ep.content.files[0]) {
+    if (ep.clicked === 'confirm' && ep.content.files[0]) {
       const asset = await
       MessageBus.ext.request('data/asset//new',
         {
diff --git a/src/adonisjs/public/dccs/edit/inplace-text-editor.js b/src/adonisjs/public/dccs/edit/inplace-text-editor.js
index fd45a202d..022316b13 100644
--- a/src/adonisjs/public/dccs/edit/inplace-text-editor.js
+++ b/src/adonisjs/public/dccs/edit/inplace-text-editor.js
@@ -48,9 +48,11 @@ class EditDCCText extends EditDCC {
     console.log(knotContent)
     console.log(el)
 
+
     super(dcc, dcc.currentPresentation())
     this._knotContent = knotContent
     this._element = el
+    this._editDCC = dcc
     this._handleHighlighter = this._handleHighlighter.bind(this)
     this._handleImageUpload = this._handleImageUpload.bind(this)
     this._handleAnnotation = this._handleAnnotation.bind(this)
@@ -66,6 +68,8 @@ class EditDCCText extends EditDCC {
                               EditDCCText.toolbarTemplateHighlighter +
                               EditDCCText.toolbarTemplateConfirm
     this._buildEditor(false)
+    document.querySelector('.ql-editor').focus()
+
   }
 
   _buildEditor (selectOptions, oldDelta) {
@@ -103,10 +107,14 @@ class EditDCCText extends EditDCC {
 
     // this._editorToolbar = this._buildToolbarPanel();
     // this._editorWrapper.appendChild(this._editorToolbar);
+    // document.getElementById('inplace-editor-wrapper').appendChild(_editorContainer)
+    this._editDCC.parentNode.insertBefore(this._fetchEditorContainer(), this._editDCC.nextSibling)
     this._buildToolbarPanel(this._toolbarControls)
 
     this._editor = this._buildEditorPanel()
-    this._editorWrapper.appendChild(this._editor)
+
+    // this._editorWrapper.appendChild(this._editor)
+    this._fetchEditorContainer().appendChild(this._editor)
 
     this._buildQuillEditor(selectOptions, oldDelta)
 
@@ -132,16 +140,14 @@ class EditDCCText extends EditDCC {
 
   _buildEditorPanel () {
     const editor = document.createElement('div')
-    editor.style.position = 'absolute'
-    editor.style.left = this._transformRelativeX(
-      this._elementWrapperRect.left - this._containerRect.left)
-    editor.style.top = this._transformRelativeY(
-      this._elementWrapperRect.top - this._containerRect.top)
-    editor.style.width = this._transformRelativeX(this._elementWrapperRect.width)
-    editor.style.height =
-        this._transformRelativeY(
-          (this._elementWrapperRect.height < EditDCCText.minHeight) ? EditDCCText.minHeight : this._elementWrapperRect.height
-        )
+    editor.style.position = 'sticky'
+    // editor.style.left = this._transformRelativeX(
+    //   this._elementWrapperRect.left - this._containerRect.left)
+    // editor.style.top = this._transformRelativeY(
+    //   this._elementWrapperRect.top - this._containerRect.top)
+    // editor.style.width = this._transformRelativeX(this._elementWrapperRect.width)
+    // editor.style.height =
+    //      this._transformRelativeY(this._elementWrapperRect.height)
     if (this._svgDraw) {
       editor.innerHTML =
             EditDCCText.editorTemplate.svg
@@ -223,7 +229,7 @@ class EditDCCText extends EditDCC {
         }
       })
     if (selectOptions) { this._quill.setContents(oldDelta) }
-    this._editor.classList.add('inplace-editor')
+    this._editor.classList.add('w-100', 'inplace-editor')
 
     // toolbar customization
     // document.querySelector('.ql-link').innerHTML =
diff --git a/src/adonisjs/public/infra/css/common-author.css b/src/adonisjs/public/infra/css/common-author.css
index 11c4ba43d..d8b7a2fbf 100644
--- a/src/adonisjs/public/infra/css/common-author.css
+++ b/src/adonisjs/public/infra/css/common-author.css
@@ -45,7 +45,7 @@ nav.navbar {
 /* author draft css start*/
 .draft-scroll-container{
   padding-bottom: 2%;
-  height: 60% !important;
+  height: 80% !important;
   width: 100% !important;
 }
 
@@ -174,6 +174,7 @@ nav.navbar {
   padding-left: 70px;
   padding-right: 70px;
   padding-top: 70px;
+  padding-bottom: 10px; 
 }
 .draft-quest-icon{
   border: 7px solid #e8e8e8;
diff --git a/src/adonisjs/public/themes/simple/css/theme.css b/src/adonisjs/public/themes/simple/css/theme.css
index 856e151fb..668192646 100644
--- a/src/adonisjs/public/themes/simple/css/theme.css
+++ b/src/adonisjs/public/themes/simple/css/theme.css
@@ -10,16 +10,17 @@
  ******/
 
 .styt-main-frame {
-   position: absolute;
+   /* position: absolute; */
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: #004270;
+   width: 100%;
 }
 
 .styt-main {
-   position: absolute;
+   /* position: absolute; */
    left: 15px;
    right: 15px;
    top: 10px;
@@ -44,17 +45,17 @@
 /* .styt-main, .styt-button, input[type="text"], textarea { */
 .styt-main, .styt-button, .styt-button-option {
    /* font-size: 4vmin; */
-   font-size: 3vmin;
+   font-size: 1.8rem;
 }
 
 .styt-main-text {
    width: 100%;
    height: 100%;
-   overflow: scroll;
+   /* overflow: scroll; */
 }
 
 .styt-button-frame {
-   position: absolute;
+   /* position: absolute; */
    bottom: 0px;
    width: 100%;
    /* display: flex; */
@@ -71,7 +72,7 @@
    margin-left: auto;
    margin-right: auto;
    text-align: center;
-
+   margin-bottom: 15px;
    color: white;
    /* padding: 12px 0px 0px 0px; */
    border-radius: 10px;
@@ -120,4 +121,4 @@
    padding: .375rem .75rem;
    width: 100%;
    margin-bottom: 1rem;
-}
\ No newline at end of file
+}
diff --git a/src/adonisjs/public/themes/simple/detailed.html b/src/adonisjs/public/themes/simple/detailed.html
index 79d988357..c433a9aa1 100644
--- a/src/adonisjs/public/themes/simple/detailed.html
+++ b/src/adonisjs/public/themes/simple/detailed.html
@@ -14,4 +14,4 @@
    <div id="action-2-wrapper" class="styt-button" style="display:none">
       <div id="action-2"></div>
    </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/adonisjs/public/themes/simple/exam_zoom.html b/src/adonisjs/public/themes/simple/exam_zoom.html
index 4d1043f80..b3792e619 100644
--- a/src/adonisjs/public/themes/simple/exam_zoom.html
+++ b/src/adonisjs/public/themes/simple/exam_zoom.html
@@ -10,4 +10,4 @@
 </div>
 <div id="action-1-wrapper" class="styt-button-frame">
    <div id="action-1" class="styt-button"></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/adonisjs/public/themes/simple/input.html b/src/adonisjs/public/themes/simple/input.html
index 37dc26e56..464845bfd 100644
--- a/src/adonisjs/public/themes/simple/input.html
+++ b/src/adonisjs/public/themes/simple/input.html
@@ -1,21 +1,30 @@
-<div class="styt-main-frame">
-   <div class="styt-main">
-      <div class="styt-main-text">
-         <dcc-styler xstyle="out" distribution="generic" targeted="action">
-            {knot}
-         </dcc-styler>
-         <div id="role-1-text"></div>
-         <div id="role-1"></div>
-         <br><br>
-         <div id="role-2-text"></div>
-         <div id="role-2"></div>
-         <br><br>
-         <div id="role-3-text"></div>
-         <div id="role-3"></div>
-         <br><br>
-      </div>
-   </div>
+
+
+<div class="row">
+  <div class="styt-main-frame">
+     <div class="styt-main">
+        <div class="styt-main-text">
+           <dcc-styler xstyle="out" distribution="generic" targeted="action">
+              {knot}
+           </dcc-styler>
+           <div id="role-1-text"></div>
+           <div id="role-1"></div>
+           <br><br>
+           <div id="role-2-text"></div>
+           <div id="role-2"></div>
+           <br><br>
+           <div id="role-3-text"></div>
+           <div id="role-3"></div>
+           <br><br>
+        </div>
+     </div>
+  </div>
+
+</div>
+
+
+<div class="row">
+  <div id="action-1-wrapper" class="styt-button-frame">
+     <div id="action-1" class="styt-button"></div>
+  </div>
 </div>
-<div id="action-1-wrapper" class="styt-button-frame">
-   <div id="action-1" class="styt-button"></div>
-</div>
\ No newline at end of file
diff --git a/src/adonisjs/public/translator/translator.js b/src/adonisjs/public/translator/translator.js
index c57fc3dcb..ed05e2b15 100644
--- a/src/adonisjs/public/translator/translator.js
+++ b/src/adonisjs/public/translator/translator.js
@@ -734,7 +734,7 @@ class Translator {
               scramble: true,
               options: {}
             }, compiled[c - 1]._source)
-          this._transferOption(optionGroup.options, compiled[c-1])
+          this._transferOption(optionGroup.options, compiled[c - 1])
           compiled[c - 1] = optionGroup
         }
         if (optionGroup != null) {
@@ -748,19 +748,19 @@ class Translator {
     }
   }
 
-  _transferOption(options, compiledItem) {
-      options[compiledItem.label] = {
-        target: (compiledItem.target)
-          ? compiledItem.target : '(default)'
-      }
-      if (compiledItem.message) {
-        options[compiledItem.label].message =
+  _transferOption (options, compiledItem) {
+    options[compiledItem.label] = {
+      target: (compiledItem.target)
+        ? compiledItem.target : '(default)'
+    }
+    if (compiledItem.message) {
+      options[compiledItem.label].message =
                  compiledItem.message
-      }
-      if (compiledItem.state) {
-        options[compiledItem.label].state = compiledItem.state
-        options[compiledItem.label].operation = compiledItem.operation
-      }
+    }
+    if (compiledItem.state) {
+      options[compiledItem.label].state = compiledItem.state
+      options[compiledItem.label].operation = compiledItem.operation
+    }
   }
 
   // check if both are quoted or subordinated
@@ -1532,10 +1532,7 @@ class Translator {
     if (matchArray[3] != null) { option.divert = matchArray[3].trim() }
     if (matchArray[4] != null) { option.target = matchArray[4].trim() }
     if (matchArray[5] != null) { option.message = matchArray[5].trim() }
-    if (matchArray[6] != null)
-      { option.operation = matchArray[6].trim() }
-    else if (matchArray[8] != null)
-      { option.operation = matchArray[8].trim() }
+    if (matchArray[6] != null) { option.operation = matchArray[6].trim() } else if (matchArray[8] != null) { option.operation = matchArray[8].trim() }
     if (matchArray[7] != null) { option.state = matchArray[7].trim() }
 
     return option
@@ -1582,8 +1579,7 @@ class Translator {
 
   _optionObjToMd (obj) {
     let state = ''
-    if (obj.state && obj.operation)
-      state = ' ' + ((obj.operation == ">") ? '>' : '') + '((' + obj.state + '))' + ((obj.operation == "?") ? '?' : '')
+    if (obj.state && obj.operation) { state = ' ' + ((obj.operation == '>') ? '>' : '') + '((' + obj.state + '))' + ((obj.operation == '?') ? '?' : '') }
     return Translator.markdownTemplates.option
       .replace('{subtype}', (obj.subtype == '_') ? '' : obj.subtype + ' ')
       .replace('{label}', (obj.label) ? obj.label : '')
@@ -1956,8 +1952,7 @@ class Translator {
         first = false
         const option = obj.options[op]
         let state = ''
-        if (option.state && option.operation)
-          state = ' ' + ((option.operation == ">") ? '>' : '') + '((' + option.state + '))' + ((option.operation == "?") ? '?' : '')
+        if (option.state && option.operation) { state = ' ' + ((option.operation == '>') ? '>' : '') + '((' + option.state + '))' + ((option.operation == '?') ? '?' : '') }
         md += Translator.markdownTemplates.choice
           .replace('{label}', op)
           .replace('{target}',
@@ -1965,7 +1960,7 @@ class Translator {
               ? option.target : '')
           .replace('{message}',
             (option.message ? '"' + option.message + '"' : ''))
-          .replace("{state}", state)
+          .replace('{state}', state)
       }
     } else {
       let extraAttr = ''
diff --git a/src/adonisjs/resources/views/author/author.edge b/src/adonisjs/resources/views/author/author.edge
index 0cb542293..0f3781b69 100644
--- a/src/adonisjs/resources/views/author/author.edge
+++ b/src/adonisjs/resources/views/author/author.edge
@@ -124,15 +124,16 @@
             </div>
           </div>
         -->
-          <div class="col-2">
+          <!-- <div class="col-2">
 
-          </div>
+          </div> -->
         </nav>
       </div>
       <!-- End of toolbar -->
 
-      <div class="d-flex">
-          <div id="navigation-block" style="position:relative" class="w-25">
+      <div class="d-flex h-75">
+        <!-- Container displayng the flow of the case -->
+          <div id="navigation-block" class="w-25" style="position:relative">
             <div class="sty-navigation-block">
               <div class="sty-navigation-panel std-border">
                 <div id="navigation-panel"></div>
@@ -141,7 +142,9 @@
               </div>
             </div>
           </div>
+        <!-- End of container displayng the flow of the case -->
 
+        <!-- Container displaying the case -->
           <div class="w-75 d-flex" id="knot-main">
             <div id="navigator-expansion" class="sty-navigation-expansion">
                 <div id="navigation-set" class="sty-navigation-set">
@@ -150,8 +153,10 @@
                 </div>
             </div>
             <div class="w-100">
-              <div id="inplace-editor-wrapper" class="sticky-top std-border">
-                <div id="knot-panel" class="sty-knot-panel"></div>
+               <div id="inplace-editor-wrapper" class="d-flex h-100 sticky-top std-border">
+                 <div id="knot-panel" class="d-flex flex-column sty-knot-panel w-100 h-100 scroll-y">
+
+                 </div>
               </div>
             </div>
             <div id="properties-expansion" class="sty-navigation-expansion">
@@ -159,7 +164,7 @@
                 <dcc-button id="button-retract-prop" topic="control/properties/retract" label="Retract" image="/author/icons/icon-expansion-right.svg" style="display:none"></dcc-button>
             </div>
           </div>
-
+        <!-- End of container displaying the case -->
           <div id="elements-main" class="d-flex">
             <div id="elements-block" class="sty-elements-block" style="position:relative; display:none">
                <!--
diff --git a/src/adonisjs/resources/views/author/drafts-quest.edge b/src/adonisjs/resources/views/author/drafts-quest.edge
index 0302ca600..73edc2ab6 100644
--- a/src/adonisjs/resources/views/author/drafts-quest.edge
+++ b/src/adonisjs/resources/views/author/drafts-quest.edge
@@ -18,12 +18,14 @@
       <!-- End of breadcrumbs -->
 
       <div class="h-100 w-100 home-content-padding">
-        <div class="home-text mb-5">
+        <div class="home-text mb-4">
           <p>Choose a quest to filter your cases.</p>
         </div>
         <div id="case-boxes" class="container-fluid h-100 scroll-x draft-scroll-container">
+          <div class="d-flex justify-content-end mb-3">
+                <button type="button" name="draft-button-all" class="btn btn-secondary align-self-start" onclick="window.location.href='{{route('draft_all_cases')}}'">Show all cases</button>
+          </div>
           <div class="d-flex">
-
               @each(q in quests)
 
               <div class="d-flex justify-content-center text-center draft-quest-container">
@@ -34,7 +36,6 @@
 
               </div>
               @endeach
-
           </div>
         </div>
       </div>
diff --git a/src/adonisjs/resources/views/author/template-case.edge b/src/adonisjs/resources/views/author/template-case.edge
index 7263cc519..056d2c48a 100644
--- a/src/adonisjs/resources/views/author/template-case.edge
+++ b/src/adonisjs/resources/views/author/template-case.edge
@@ -37,25 +37,41 @@
                   <label for="description">Description</label>
                   <textarea class="form-control" id="description" name="description"></textarea>
                 </div>
+                <div class="form-group">
+                  <label for="creationDate">Creation Date</label>
+                  <input type="date" class="form-control" id="creationDate" name="creationDate">
+                </div>
                 <div class="form-group">
                   <label for="language">Language</label>
-                  <select name="language" id="language" name="language">
+                  <select name="language" id="language">
                      <option value="pt-BR">Portuguese (Brazil)</option>
-                     <option value="pt-BR">Portuguese (Portugal)</option>
+                     <option value="pt-PT">Portuguese (Portugal)</option>
                      <option value="en">English</option>
                   </select>
                 </div>
                 <div class="form-group">
-                  <label for="creationDate">Creation Date</label>
-                  <input type="date" class="form-control" id="creationDate" name="creationDate">
-                </div>
-                <!--<div class="form-group">
                   <label for="institution">Institution</label>
-                  <input type="text" class="form-control" id="institution" name="institution" placeholder="Enter your institution">
-                </div> -->
+                  <select name="institution" id="institution">
+                     <option value="unicamp">Unicamp</option>
+                     <option value="minho">Universidade do Minho</option>
+                  </select>
+                </div>
                 <div class="form-group">
                   <label for="domain">Domain</label>
-                  <input type="text" class="form-control" id="domain" name="domain" placeholder="Inform the case domain">
+                  <select name="domain" id="domain" value={{ caseDomain }}>
+                    <option value="Medicine">Medicine</option>
+                    <option value="Nurse">Nurse</option>
+                    <option value="Physioterapy">Physioterapy</option>
+                    <option value="Pharmacy">Pharmacy</option>
+                    <option value="Occupational Therapy">Occupational Therapy</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label for="complexity">Complexity</label>
+                  <select name="complexity" id="complexity" value={{caseComplexity}}>
+                    <option value="Undergraduate">Undergraduate</option>
+                    <option value="Postgraduate">Postgraduate</option>
+                  </select>
                 </div>
                 <div class="form-group">
                   <label for="specialty">Specialty</label>
diff --git a/src/adonisjs/resources/views/components/input.edge b/src/adonisjs/resources/views/components/input.edge
index 30edd1e3b..73f9c18eb 100644
--- a/src/adonisjs/resources/views/components/input.edge
+++ b/src/adonisjs/resources/views/components/input.edge
@@ -11,5 +11,5 @@
       value="{{ value }}"
     @endif
     {{ required ? 'required' : null }}
-  >
-</div>
\ No newline at end of file
+  autofocus>
+</div>
diff --git a/src/adonisjs/resources/views/index.edge b/src/adonisjs/resources/views/index.edge
index d59c92f6b..b62116fc9 100644
--- a/src/adonisjs/resources/views/index.edge
+++ b/src/adonisjs/resources/views/index.edge
@@ -11,6 +11,8 @@
   <link rel="stylesheet" href="start/css/main.css"/>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/>
 
+  <!-- Favicon -->  
+  <link rel="shortcut icon" href="#">
 
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script src="{{ assetsUrl('infra/bus.js') }}"></script>
diff --git a/src/adonisjs/resources/views/layout/partials/settings-modal.edge b/src/adonisjs/resources/views/layout/partials/settings-modal.edge
index 222bb95a2..fbb39d10f 100644
--- a/src/adonisjs/resources/views/layout/partials/settings-modal.edge
+++ b/src/adonisjs/resources/views/layout/partials/settings-modal.edge
@@ -17,6 +17,11 @@
             <label for="description">Description</label>
             <textarea class="form-control" id="description" name="description">{{caseDescription}}</textarea>
           </div>
+          <div class="form-group">
+            <label for="creationDate">Creation Date</label>
+            <input type="date" class="form-control" id="creationDate" name="creationDate" value="{{caseOriginalDate}}">
+            {{-- <small id="keywords-help" class="form-text text-muted">Inform the date of case creation on Jacinto Moodle</small> --}}
+          </div>
           <div class="form-group">
             <label for="language">Language</label>
             <select name="language" id="language" value={{caseLanguage}}>
@@ -27,17 +32,32 @@
             </select>
           </div>
           <div class="form-group">
-            <label for="originalDate">Original Date</label>
-            <input type="date" class="form-control" id="originalDate" name="originalDate" value="{{caseOriginalDate}}">
-            {{-- <small id="keywords-help" class="form-text text-muted">Inform the date of case creation on Jacinto Moodle</small> --}}
-          </div>
-<!--          <div class="form-group">
             <label for="institution">Institution</label>
-          <input type="text" class="form-control" id="institution" name="institution" value="{{caseInstitution}}" placeholder="Enter your institution">
-        </div> -->
+            <select name="institution" id="institution" value={{ caseInstitution }}>
+              <option value={{caseInstitution}} selected disabled hidden>{{caseInstitution}}</option>
+              <option value="unicamp">Unicamp</option>
+              <option value="minho">Universidade do Minho</option>
+            </select>
+          </div>
           <div class="form-group">
             <label for="domain">Domain</label>
-            <input type="text" class="form-control" id="domain" name="domain" value="{{caseDomain}}" placeholder="Inform the case domain">
+            <select name="domain" id="domain" value={{ caseDomain }}>
+              <option value={{ caseDomain }} selected disabled hidden>{{caseDomain}}</option>
+              <option value="Medicine">Medicine</option>
+              <option value="Nurse">Nurse</option>
+              <option value="Physioterapy">Physioterapy</option>
+              <option value="Pharmacy">Pharmacy</option>
+              <option value="Occupational Therapy">Occupational Therapy</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="complexity">Complexity</label>
+            <select name="complexity" id="complexity" value={{caseComplexity}}>
+               <option value={{caseComplexity}} selected disabled hidden>{{caseComplexity}}</option>
+               <option value="undergraduate">Undergraduate</option>
+               <option value="postgraduate">Postgraduate</option>
+            </select>
           </div>
           <div class="form-group">
             <label for="specialty">Specialty</label>
diff --git a/src/adonisjs/start/routes.js b/src/adonisjs/start/routes.js
index 243487ac7..c2ff396c0 100644
--- a/src/adonisjs/start/routes.js
+++ b/src/adonisjs/start/routes.js
@@ -1,6 +1,6 @@
 /* global use */
 'use strict'
-
+const Helpers = use('Helpers')
 /*
 |--------------------------------------------------------------------------
 | Routes
@@ -72,15 +72,18 @@ Route.group(() => {
 }).prefix('drafts')
 
 Route.group(() => {
-	Route.post(  'link/case',		'CaseController.linkCase')
+  Route.post('link/case', 'CaseController.linkCase')
 }).prefix('/quest').middleware('auth')
 
-
 /*
 let harenaManagerUrl =
    Env.get("HARENA_MANAGER_URL", "http://localhost:3000/api/v1/");
 */
 
+Route.get('translator/playground', ({ view, request }) => {
+  return Helpers.publicPath('translator/playground/index.html')
+})
+
 Route.get('player', 'QuestController.getQuests').as('player_home')
 
 Route.get('player/quest', 'QuestController.getCasesByQuest').as('player_quest')