diff --git a/src/adonisjs/public/author/create/case/index.html b/src/adonisjs/public/author/create/case/index.html
index 49cbf34c6..3a4bbc610 100644
--- a/src/adonisjs/public/author/create/case/index.html
+++ b/src/adonisjs/public/author/create/case/index.html
@@ -72,6 +72,7 @@
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
               <!-- <li class="breadcrumb-item"><a href="home.html">Home</a></li> -->
+							<li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Create</li>
             </ol>
diff --git a/src/adonisjs/public/author/create/index.html b/src/adonisjs/public/author/create/index.html
index 20e5c9610..450e742ff 100644
--- a/src/adonisjs/public/author/create/index.html
+++ b/src/adonisjs/public/author/create/index.html
@@ -19,6 +19,7 @@
     <script src="../../infra/basic.js"></script>
     <script src="../../infra/dcc-common-server-proxy.js"></script>
     <script src="../../infra/dcc-common-server-address.js"></script>
+    <script src="../../infra/simple-page-tasks.js"></script>
     <script src="../../infra/token-validator.js"></script>
 
     <script src="../../dccs/dcc.js"></script>
@@ -75,6 +76,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Create</li>
             </ol>
diff --git a/src/adonisjs/public/author/drafts/category/cases/index.html b/src/adonisjs/public/author/drafts/category/cases/index.html
index 48c32d741..ad2309998 100644
--- a/src/adonisjs/public/author/drafts/category/cases/index.html
+++ b/src/adonisjs/public/author/drafts/category/cases/index.html
@@ -74,6 +74,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>
diff --git a/src/adonisjs/public/author/drafts/category/index.html b/src/adonisjs/public/author/drafts/category/index.html
index d24fd73e3..753902577 100644
--- a/src/adonisjs/public/author/drafts/category/index.html
+++ b/src/adonisjs/public/author/drafts/category/index.html
@@ -73,6 +73,7 @@
         <div class="mr-auto zindex-fixed author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href='/author/home'>Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>
diff --git a/src/adonisjs/public/author/drafts/index.html b/src/adonisjs/public/author/drafts/index.html
index 03ecbf635..865c445aa 100644
--- a/src/adonisjs/public/author/drafts/index.html
+++ b/src/adonisjs/public/author/drafts/index.html
@@ -73,6 +73,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>
@@ -85,7 +86,26 @@
             <p>Continue editing your drafted cases.</p>
           </div>
           <div id="case-boxes" class="container-fluid h-100 scroll-y draft-scroll-container">
-
+            <dcc-rest id="harena-cases" bind="harena-cases"></dcc-rest>
+            <dcc-dhtml id="harena-dhtml-cases" connect="harena-cases:service/request/get:retrieve">
+              {{@foreach . cases}}
+              <div id="b{{cases.id}}" class="row draft-author-case-container">
+                <div class="col draft-case-title">
+                  {{cases.title}}
+                  <div class="row">
+                    <h6>Created by {{cases.author_grade}}: {{cases.username}}</h6>
+                  </div>
+                </div>
+
+                <div class="d-flex justify-content-end justify-content-center buttons-container">
+                  <div id="e{{cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
+                  <div id="p{{cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
+                  <div id="d{{cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
+                </div>
+              </div>
+              {{@endfor}}
+              <end-dcc></end-dcc>
+            </dcc-dhtml>
           </div>
         </div>
       </div>
diff --git a/src/adonisjs/public/author/drafts/quest/cases/index.html b/src/adonisjs/public/author/drafts/quest/cases/index.html
index 19fed4656..bfd8c9339 100644
--- a/src/adonisjs/public/author/drafts/quest/cases/index.html
+++ b/src/adonisjs/public/author/drafts/quest/cases/index.html
@@ -72,6 +72,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>
diff --git a/src/adonisjs/public/author/drafts/quest/index.html b/src/adonisjs/public/author/drafts/quest/index.html
index 70d0241d6..9496c8091 100644
--- a/src/adonisjs/public/author/drafts/quest/index.html
+++ b/src/adonisjs/public/author/drafts/quest/index.html
@@ -72,6 +72,7 @@
         <div class="mr-auto zindex-fixed author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>
diff --git a/src/adonisjs/public/author/home/index.html b/src/adonisjs/public/author/home/index.html
index e04dec6b8..30f7d1e6b 100644
--- a/src/adonisjs/public/author/home/index.html
+++ b/src/adonisjs/public/author/home/index.html
@@ -67,9 +67,19 @@
 	  <!-- Login/logout header -->
 	  <dcc-include src="/author/partials/header.html"></dcc-include>
 	  <!-- Create a section to place page content -->
+
 	  <main role="main">
 	    <div class="d-flex flex-column vh-100 vw-100 home-author-padding hidden-overflow">
-
+				<!-- Create breadcrumbs -->
+				<div class="ml-4 mr-auto zindex-fixed author-breadcrumb" >
+					<nav aria-label="breadcrumb">
+						<ol class="breadcrumb">
+							<li class="breadcrumb-item"><a href="/">Welcome</a></li>
+							<li class="breadcrumb-item active" aria-current="page">Home</li>
+						</ol>
+					</nav>
+				</div>
+				<!-- End of breadcrumbs -->
 	      <div class="h-100 w-100 home-content-padding">
 	        <div class="home-text mb-5">
 	          <p>Hello!</p>
diff --git a/src/adonisjs/public/author/index.html b/src/adonisjs/public/author/index.html
index 6682e491d..97360b8ae 100644
--- a/src/adonisjs/public/author/index.html
+++ b/src/adonisjs/public/author/index.html
@@ -197,6 +197,7 @@ <h3>Settings</h3>
         <nav aria-label="breadcrumb">
           <ol class="breadcrumb">
             <!-- <li class="breadcrumb-item"><a href="//home.html">Home</a></li> -->
+            <li class="breadcrumb-item"><a href="/">Welcome</a></li>
             <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
             <li class="breadcrumb-item">
               <div style="height: 15px;">
diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js
index 4c3d50964..026372fcb 100644
--- a/src/adonisjs/public/author/js/author.js
+++ b/src/adonisjs/public/author/js/author.js
@@ -717,68 +717,25 @@ class AuthorManager {
 
   elementSelected (topic, message) {
     const dccId = MessageBus.extractLevel(topic, 3)
-    /*
-    console.log('=== level 3')
-    console.log(dccId)
-    */
-
     this._collectEditableDCCs()
-
-    /*
-    console.log('=== editable DCCs')
-    console.log(this._editableDCCs)
-
-    console.log('=== knot selected')
-    console.log(this._knots[this._knotSelected].content)
-    */
-
     const elSeq = parseInt(dccId.substring(3))
-    // console.log(elSeq)
     let el = -1
     for (el = 0; el < this._knots[this._knotSelected].content.length &&
-                   this._knots[this._knotSelected].content[el].seq != elSeq; el++)
+                 this._knots[this._knotSelected].content[el].seq != elSeq; el++)
     /* nothing */;
 
     if (el != -1) {
-      /*
-         const presentationId = (message == null) ? null : message.presentationId;
-         let dcc = (presentationId != null)
-            ? this._editableDCCs[presentationId]
-            : this._editableDCCs[dccId];
-         */
-      let dcc = this._editableDCCs[dccId]
-
-      /*
-      console.log('=== dcc to edit')
-      console.log(dcc)
-      */
+      for (let edcc in this._editableDCCs)
+        if (this._editableDCCs[edcc].deactivateAuthor)
+          this._editableDCCs[edcc].deactivateAuthor()
 
+      let dcc = this._editableDCCs[dccId]
       const element = this._knots[this._knotSelected].content[el]
-      /*
-         console.log("=== element properties");
-         console.log(element);
-         console.log("presentation-dcc-" + message);
-         console.log(Object.keys(this._editableDCCs));
-         */
-      // check if there is an option (trigger) element inside an input dcc
-      /*
-         let roleEdit = message;
-         if (element.type == "input" && element.subtype == "choice" &&
-             element.exclusive && message != "text" &&
-             this._editableDCCs["presentation-dcc-" + message]) {
-            dcc = this._editableDCCs["presentation-dcc-" + message];
-            roleEdit = null;
-            console.log("=== new dcc");
-            console.log(dcc);
-         }
-         this._elementSelected = el;
-         */
 
-      if (this._previousEditedDCC) { this._previousEditedDCC.reactivateAuthor() }
+      // if (this._previousEditedDCC) { this._previousEditedDCC.reactivateAuthor() }
 
       const role = (message != null) ? message.role : null
 
-      // dcc.edit((presentationId != null) ? null : role);
       dcc.edit(role)
 
       this._previousEditedDCC = dcc
diff --git a/src/adonisjs/public/author/js/create.js b/src/adonisjs/public/author/js/create.js
index 977b445ce..e6ceae319 100644
--- a/src/adonisjs/public/author/js/create.js
+++ b/src/adonisjs/public/author/js/create.js
@@ -36,6 +36,7 @@ class TemplateManager {
         }
       )
     }
+    MessageBus.ext.publish('control/dhtml/ready')
   }
 }
 
diff --git a/src/adonisjs/public/author/js/draft.js b/src/adonisjs/public/author/js/draft.js
index 8e0639e81..5e5938854 100644
--- a/src/adonisjs/public/author/js/draft.js
+++ b/src/adonisjs/public/author/js/draft.js
@@ -20,8 +20,9 @@ class DraftManager {
     this._draftCategoryCasesSelect = this._draftCategoryCasesSelect.bind(this)
     this._boxesPanel = document.querySelector('#case-boxes')
     // this._draftSelect(authorState.userid, advanced);
-    document.getElementsByClassName('buttons-container').length > 0
-      ? MessageBus.ext.subscribe('control/dhtml/ready', this._draftCategoryCasesSelect) : this._draftSelect(advanced)
+    // document.getElementsByClassName('buttons-container').length > 0
+    //   ? MessageBus.ext.subscribe('control/dhtml/ready', this._draftCategoryCasesSelect) : this._draftSelect(advanced)
+    MessageBus.ext.subscribe('control/dhtml/ready', this._draftCategoryCasesSelect)
   }
 
   async _draftSelect (advanced) {
@@ -78,7 +79,7 @@ class DraftManager {
   }
 
   async _draftCategoryCasesSelect (advanced) {
-    console.log('Drafting cases by category')
+    // console.log('Drafting cases by category')
     // const cases = await MessageBus.ext.request('data/case/*/list')
     // {user: userid});
 
diff --git a/src/adonisjs/public/author/js/template-case.js b/src/adonisjs/public/author/js/template-case.js
index a729a093a..5fc1d44ef 100644
--- a/src/adonisjs/public/author/js/template-case.js
+++ b/src/adonisjs/public/author/js/template-case.js
@@ -16,8 +16,8 @@ class TemplateToCase {
           document.querySelector('#template').value = _url.searchParams.get('template').replace(/__/ig, '/')
           document.querySelector('#category').value = _url.searchParams.get('category')
 
-          const params = new FormData(document.querySelector('form'))
-
+          const params = new FormData(document.querySelector('#create-case-form'))
+          console.log(params);
           console.log(params.get('template'));
           /*
           // params.set('template', _url.searchParams.get('template').replace(/__/ig, "/"))
diff --git a/src/adonisjs/public/author/partials/header.html b/src/adonisjs/public/author/partials/header.html
index c6fcfc11e..1737f0b5f 100644
--- a/src/adonisjs/public/author/partials/header.html
+++ b/src/adonisjs/public/author/partials/header.html
@@ -1,15 +1,41 @@
 <div class="fixed-top">
+  <dcc-rest id="harena-login" bind="harena-login"></dcc-rest>
   <nav>
-      <div class="d-flex overflow-hidden pt-3 mr-4" id="harena-header">
-      <span class="inline-flex mr-4 rounded-md shadow ml-auto bg-white" id="header-login">
-        <div id="login-block" >
-          <a href="/login" class="inline-flex items-center px-4 py-2 text-base bg-white">
+      <div class="d-flex overflow-hidden pt-2 mr-4" id="harena-header">
+      <span class="inline-flex mr-4 rounded-md ml-auto " id="header-login">
+        <div id="login-block">
+          <!-- <a href="/login" class="inline-flex items-center px-4 py-2 text-base bg-white">
             Log in
-          </a>
+          </a> -->
+          <!-- <div class="dropdown"> -->
+            <button id="loginDropdownBtn" class="btn btn-light shadow text-primary pl-4 pt-1 dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Login
+            </button>
+            <form class="dropdown-menu p-4 mr-5">
+              <div class="form-group">
+                <label for="email">Email address</label>
+                <input type="email" class="form-control" id="email" name="email" placeholder="email@example.com">
+              </div>
+              <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
+              </div>
+              <dcc-submit bind="submit-login" label="Login" xstyle="btn btn-outline-primary" connect="harena-login:service/request/post:submit">
+            </form>
+          <!-- </div> -->
         </div>
         <div id="logout-block" style="display: none;">
           <dcc-rest id="harena-logout" bind="harena-logout"></dcc-rest>
-          <dcc-submit xstyle="inline-flex items-center px-4 py-2 text-base bg-white text-primary" id="logout-button" bind="submit-logout" label="Logout" connect="harena-logout:service/request/post:submit">
+          <button id="logoutDropdownBtn" class="btn btn-light shadow text-primary pl-4 pt-1 dropdown-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Logout
+          </button>
+          <div class="dropdown-menu mr-5" aria-labelledby="logoutDropdownBtn">
+            <a class="dropdown-item" href="/user/settings">Change Password</a>
+            <div class="dropdown-divider"></div>
+
+            <dcc-submit xstyle="dropdown-item" id="logout-button" bind="submit-logout" label="Logout" connect="harena-logout:service/request/post:submit">
+
+            </div>
         </div>
       </span>
     </div>
diff --git a/src/adonisjs/public/author/partials/template-min.html b/src/adonisjs/public/author/partials/template-min.html
index c0e15a941..9c3728cff 100644
--- a/src/adonisjs/public/author/partials/template-min.html
+++ b/src/adonisjs/public/author/partials/template-min.html
@@ -10,9 +10,9 @@
 
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
-  <script src="../lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
-  <script src="../lib/popper-1-15-0/popper.min.js"></script>
-  <script src="../lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
+  <script src="./lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
+  <script src="./lib/popper-1-15-0/popper.min.js"></script>
+  <script src="./lib/bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
 
   <script src="../config/config.js"></script>
   <script src="../infra/bus.js"></script>
diff --git a/src/adonisjs/public/dccs/components/dcc-visual.js b/src/adonisjs/public/dccs/components/dcc-visual.js
index 419dcadd2..3627465e2 100644
--- a/src/adonisjs/public/dccs/components/dcc-visual.js
+++ b/src/adonisjs/public/dccs/components/dcc-visual.js
@@ -53,14 +53,19 @@ class DCCVisual extends DCCBase {
   _activateAuthorPresentation (presentation, listener) {
     presentation.style.cursor = 'pointer'
     presentation.dccid = this.id
-    // presentation.addEventListener('click', listener.selectListener)
-    /*
-    console.log('=== mouse over')
-    console.log(listener)
-    */
     presentation.addEventListener('mouseover', listener.mouseoverListener)
   }
 
+  deactivateAuthor () {
+    if (this._presentation)
+      this._deactivateAuthorPresentation (this._presentation, this)
+  }
+
+  _deactivateAuthorPresentation (presentation, listener) {
+    presentation.removeEventListener('mouseover', listener.mouseoverListener)
+    presentation.style.cursor = 'default'
+  }
+
   hide () {
     if (this._presentationReady) { this._hideReady() } else { this._pendingHide = true }
   }
@@ -109,10 +114,7 @@ class DCCVisual extends DCCBase {
   }
 
   _editPresentation (presentation, listener) {
-    // presentation.removeEventListener('click', listener.selectListener)
-    presentation.removeEventListener('mouseover', listener.mouseoverListener)
-    // presentation.removeEventListener('mouseout', listener.mouseoutListener)
-    presentation.style.cursor = 'default'
+    this.deactivateAuthor()
     // check for a DCC inside a DCC
     if (presentation.tagName.toLowerCase().startsWith('dcc-')) {
       presentation.edit()
@@ -313,15 +315,16 @@ class DCCMultiVisual extends DCCVisual {
 
   checkActivateAuthor () {
     if (this.author) {
-      /*
-      console.log('=== check activate')
-      console.log(this._presentationSet)
-      */
       for (const pr of this._presentationSet) {
         this._activateAuthorPresentation(pr._presentation, pr) }
     }
   }
 
+  deactivateAuthor () {
+    for (const pr of this._presentationSet) {
+      this._deactivateAuthorPresentation(pr._presentation, pr) }
+  }
+
   _hideReady () {
     for (const pr of this._presentationSet) { pr._presentation.style.display = 'none' }
   }
@@ -444,10 +447,10 @@ class PresentationDCC {
   DCCVisual.selectedBorderStyle = '3px dashed #000000'
 
   DCCVisual.templateHTML =
-`<div style="position: relative; top: {top}px; left: {left}px; width: 75px; height: 50px; background: rgba(0, 0, 0, 0.5); text-align: left" id="panel-presentation">
-  <div id="bt-edit-element" style="width: 16px; height: 16px; display: inline-block; margin-left: 10px; margin-right: 10px; color: white">{edit}</div>
-  <div id="bt-expand-element" style="width: 16px; height: 16px; display: inline-block; color: white">{expand}</div>
+`<div style="position: relative; top: {top}px; left: {left}px; width: 45px; height: 50px; background: rgba(0, 0, 0, 0.5); text-align: left" id="panel-presentation">
+  <div id="bt-edit-element" style="width: 100%; height: 100%; padding: 5px; display: inline-block; color: white">{edit}</div>
 </div>`
+//  <div id="bt-expand-element" style="width: 16px; height: 16px; display: inline-block; color: white">{expand}</div>
 
   // pen https://fontawesome.com/icons/pen?style=solid
   DCCVisual.buttonEditSVG =
diff --git a/src/adonisjs/public/index.html b/src/adonisjs/public/index.html
index eed044dae..c207dcdda 100644
--- a/src/adonisjs/public/index.html
+++ b/src/adonisjs/public/index.html
@@ -10,12 +10,10 @@
 
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
-  <script src="lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
-  <script src="lib/popper-1-15-0/popper.min.js"></script>
-  <script src="lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
+  <script src="./lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
+  <script src="./lib/popper-1-15-0/popper.min.js"></script>
+  <script src="./lib/bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
 
   <script src="config/config.js"></script>
   <script src="infra/bus.js"></script>
diff --git a/src/adonisjs/public/infra/css/common-author.css b/src/adonisjs/public/infra/css/common-author.css
index 8ea05e66d..faa5459ae 100644
--- a/src/adonisjs/public/infra/css/common-author.css
+++ b/src/adonisjs/public/infra/css/common-author.css
@@ -28,7 +28,7 @@ nav.navbar {
 }
 
 .author-breadcrumb{
-  z-index: 1040;
+  z-index: 1031;
 }
 
 /* Content padding in author case creation page*/
@@ -259,9 +259,6 @@ nav.navbar {
 }
 .home-author-padding{
   background-color: #ffffff;
-  padding-left: 80px;
-  padding-right: 80px;
-  padding-top: 60px;
 }
 .draft-author-padding{
 	background-color: #ffffff;
diff --git a/src/adonisjs/public/infra/dcc-basic.js b/src/adonisjs/public/infra/dcc-basic.js
index ff948207c..13192988b 100644
--- a/src/adonisjs/public/infra/dcc-basic.js
+++ b/src/adonisjs/public/infra/dcc-basic.js
@@ -22,4 +22,28 @@
       }
     }
   )
+
+  DCC.component(
+    'submit-change-password',
+    'dcc-submit',
+    {
+      pos: async function (response) {
+        console.log(response['harena-change-password'])
+        const responseContainer = document.querySelector('#updatePasswordResponse')
+        responseContainer.innerHTML = response['harena-change-password']
+        if(response['harena-change-password'] === 'Password changed successfully.'){
+          console.log('if')
+          responseContainer.classList.remove('text-danger')
+          responseContainer.classList.add('text-success')
+          const promise = new Promise((resolve, reject) => {
+            setTimeout(() => resolve(window.location.href = '/'), 1000)
+          })
+        }else {
+          console.log('else')
+          responseContainer.classList.remove('text-success')
+          responseContainer.classList.add('text-danger')
+        }
+      }
+    }
+  )
 })()
diff --git a/src/adonisjs/public/infra/dcc-rest-proxy.js b/src/adonisjs/public/infra/dcc-rest-proxy.js
index 54666dee5..d6b0dd1cb 100644
--- a/src/adonisjs/public/infra/dcc-rest-proxy.js
+++ b/src/adonisjs/public/infra/dcc-rest-proxy.js
@@ -50,6 +50,33 @@
     }
   )
 
+  DCC.component(
+    'harena-change-password',
+    'dcc-rest',
+    {
+      environment: {
+        'url-manager': HarenaConfig.manager.url + HarenaConfig.manager.api
+      },
+      oas: {
+        paths: {
+          '{url-manager}/user/password': {
+            'put': {
+              operationId: 'change-password',
+              parameters: [
+                {name: 'url-manager',
+                 in: 'path'},
+                {name: 'oldPassword',
+                 in: 'query'},
+                {name: 'newPassword',
+                 in: 'query'},
+              ]
+            }
+          }
+        }
+      }
+    }
+  )
+
   DCC.component(
     'harena-create-case',
     'dcc-rest',
@@ -171,6 +198,32 @@
     }
   )
 
+  DCC.component(
+    'harena-cases',
+    'dcc-rest',
+    {
+      environment: {
+        'url-manager': HarenaConfig.manager.url + HarenaConfig.manager.api,
+        'clearance': new URL(document.location).searchParams.get('clearance')
+      },
+      oas: {
+        paths: {
+          '{url-manager}/user/cases?clearance={clearance}': {
+            'get': {
+              operationId: 'cases-list',
+              parameters: [
+                {name: 'url-manager',
+                 in: 'path'},
+                {name: 'clearance',
+                  in: 'path'}
+              ]
+            }
+          }
+        }
+      }
+    }
+  )
+
   DCC.component(
     'harena-quest-list',
     'dcc-rest',
diff --git a/src/adonisjs/public/infra/simple-page-tasks.js b/src/adonisjs/public/infra/simple-page-tasks.js
index 98d3c78dd..9d7387c91 100644
--- a/src/adonisjs/public/infra/simple-page-tasks.js
+++ b/src/adonisjs/public/infra/simple-page-tasks.js
@@ -1,20 +1,34 @@
 class PageController {
   constructor () {
-    this.loadingPage = this.loadingPage.bind(this)
+    PageController.scriptsComplete = false
+    this.removeLoadingIcon = this.removeLoadingIcon.bind(this)
     window.addEventListener("load", function(event) {
-      const template = document.createElement('template')
-      template.innerHTML = PageController.loadingBox
-      document.querySelector('body').appendChild(template.content.cloneNode(true))
-      document.querySelector('main').classList.add('invisible')
+      if (!PageController.scriptsComplete) {
+        const template = document.createElement('template')
+        template.innerHTML = PageController.loadingBox
+        document.querySelector('body').appendChild(template.content.cloneNode(true))
+        document.querySelector('main').classList.add('invisible')
+      }
+
+      // console.log(PageController.scriptsComplete)
     })
-    MessageBus.ext.subscribe('control/dhtml/ready', this.loadingPage)
-    MessageBus.ext.subscribe('control/case/ready', this.loadingPage)
+    MessageBus.ext.subscribe('control/dhtml/ready', this.removeLoadingIcon)
+    MessageBus.ext.subscribe('control/case/ready', this.removeLoadingIcon)
   }
 
-  loadingPage(){
-    // console.log('page load complete')
-    document.querySelector('main').classList.remove('invisible')
-    document.querySelector('#loading-page-container').remove()
+  removeLoadingIcon(){
+    if(document.querySelector('#loading-page-container')){
+      document.querySelector('main').classList.remove('invisible')
+      document.querySelector('#loading-page-container').remove()
+    }
+    try {
+      document.querySelector('main').classList.remove('invisible')
+    } catch (e) {
+      console.log('Error while trying to remove class "invisible" of "main" element');
+      console.log(e)
+    }
+    PageController.scriptsComplete = true
+    // console.log(PageController.scriptsComplete)
   }
 }
 (function () {
diff --git a/src/adonisjs/public/infra/token-validator.js b/src/adonisjs/public/infra/token-validator.js
index 3e8e9ab16..98b0529eb 100644
--- a/src/adonisjs/public/infra/token-validator.js
+++ b/src/adonisjs/public/infra/token-validator.js
@@ -1,8 +1,9 @@
 class TokenController {
   constructor () {
+
     this._tokenChecked = false
     this.checkToken = this.checkToken.bind(this)
-MessageBus.int.subscribe('control/button/logout-button/ready', this.checkToken)
+    MessageBus.int.subscribe('control/button/logout-button/ready', this.checkToken)
     if (window.location.pathname !== '/') {
       this.redirectUnlogged()
     }
@@ -20,41 +21,21 @@ MessageBus.int.subscribe('control/button/logout-button/ready', this.checkToken)
 
   async checkToken () {
     if (document.getElementById('harena-header')) {
-      const elemLogin = document.getElementById('login-block')
-      const elemLogout = document.getElementById('logout-block')
 
       if (TokenController.instance.tokenChecked) {
         // elem.setAttribute('onclick', 'LoginTest.i.logout()')
-        elemLogin.style.display = 'none'
-        elemLogout.style.display = 'block'
+        // TokenController.instance.changeHeaderButtons('token valid')
       } else {
-        // console.log(TokenController.instance.tokenChecked)
         const config = {
           method: 'GET',
           url: DCCCommonServer.managerAddressAPI + 'auth/check',
           withCredentials: true
         }
 
-        // console.log('=== check token request')
-        // console.log(DCCCommonServer.managerAddressAPI + 'auth/check')
         await axios(config)
           .then(function (endpointResponse) {
-          // return response.redirect('/')
-          // console.log('=== check token response')
-          // console.log(endpointResponse.data);
-
-            if (endpointResponse.data === 'token valid') {
-              // console.log('token valid')
-              // const elem = document.getElementById('header-login').firstElementChild
-              // elem.setAttribute('onclick', 'LoginTest.i.logout()')
-              // elem.href = '#'
-              elemLogin.style.display = 'none'
-              elemLogout.style.display = 'block'
-            } else {
-              // console.log('token invalid')
-              elemLogin.style.display = 'block'
-              elemLogout.style.display = 'none'
-            }
+            // console.log('check token');
+            TokenController.instance.changeHeaderButtons(endpointResponse.data)
           })
           .catch(function (error) {
             console.log('=== check token error')
@@ -64,6 +45,51 @@ MessageBus.int.subscribe('control/button/logout-button/ready', this.checkToken)
     }
   }
 
+  async changeHeaderButtons(response){
+
+      if (document.readyState === 'complete') {
+
+        try {
+          const elemLogin = document.querySelector('#login-block')
+          const elemLogout = document.querySelector('#logout-block')
+
+          if(response.token === 'token valid'){
+            // console.log(response.token)
+            elemLogin.style.display = 'none'
+            elemLogout.style.display = 'block'
+            document.querySelector('#logoutDropdownBtn').innerHTML = response.username
+          }else{
+            // console.log(response.token)
+            elemLogin.style.display = 'block'
+            elemLogout.style.display = 'none'
+          }
+        } catch (e) {
+          // console.log(e)
+        }
+      }else{
+        window.addEventListener("load", function(event) {
+          try {
+            const elemLogin = document.querySelector('#login-block')
+            const elemLogout = document.querySelector('#logout-block')
+
+            if(response.token === 'token valid'){
+              // console.log(response.token)
+              elemLogin.style.display = 'none'
+              elemLogout.style.display = 'block'
+              document.querySelector('#logoutDropdownBtn').innerHTML = response.username
+            }else{
+              // console.log(response.token)
+              elemLogin.style.display = 'block'
+              elemLogout.style.display = 'none'
+            }
+          } catch (e) {
+            // console.log(e)
+          }
+
+        });
+      }
+  }
+
   async redirectUnlogged () {
     const config = {
       method: 'GET',
@@ -75,9 +101,9 @@ MessageBus.int.subscribe('control/button/logout-button/ready', this.checkToken)
     await axios(config)
       .then(function (endpointResponse) {
         // console.log('=== check token redirect response')
-        // console.log(endpointResponse.data);
+        // console.log(endpointResponse.data)
         // endpointResponse.data === 'token valid' ? TokenController.instance.checkToken(true) : window.location.href = '/login'
-        endpointResponse.data === 'token valid' ? TokenController.instance.tokenChecked = true : window.location.href = '/login'
+        endpointResponse.data.token === 'token valid' ? TokenController.instance.changeHeaderButtons(endpointResponse.data) : window.location.href = '/user'
       })
       .catch(function (error) {
         console.log('=== check redirect error')
diff --git a/src/adonisjs/public/login/index.html b/src/adonisjs/public/login/index.html
deleted file mode 100644
index 911f96e52..000000000
--- a/src/adonisjs/public/login/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-<title> Log in | Harena </title>
-
-  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
-  <!-- @include('layout.template-min') -->
-  <link rel="stylesheet" href="../lib/fontawesome-5-10-1/css/all.min.css">
-  <link rel="stylesheet" href="../lib/bootstrap-4.4.1/css/bootstrap.min.css">
-
-  <link rel="stylesheet" href="../infra/css/common-player.css">
-  <link rel="stylesheet" href="../infra/css/common-author.css">
-
-  <script src="../lib/axios-0.20.0/axios.min.js"></script>
-
-  <script src="../config/config.js"></script>
-  <script src="../infra/bus.js"></script>
-  <script src="../infra/basic.js"></script>
-
-  <script src="../infra/dcc-common-server-proxy.js"></script>
-  <script src="../infra/dcc-common-server-address.js"></script>
-  <script src="../author/js/dcc-author-server-proxy.js "></script>
-
-  <script src="../dccs/dcc.js"></script>
-  <script src="../dccs/components/dcc-base.js "></script>
-  <script src="../dccs/components/dcc-visual.js "></script>
-  <script src="../dccs/components/dcc-block.js"></script>
-  <script src="../dccs/components/dcc-button.js"></script>
-  <script src="../dccs/components/data/dcc-submit.js"></script>
-  <script src="../dccs/components/web/dcc-rest.js"></script>
-  <script src="../dccs/components/dcc-notice-input.js"></script>
-
-  <script src="../infra/dcc-basic.js"></script>
-  <script src="../infra/dcc-rest-proxy.js"></script>
-
-</head>
-<body>
-  <!-- Create a section to place page content -->
-  <main role="main">
-    <div class="d-flex flex-column vh-100 vw-100 hidden-overflow">
-
-      <!-- Create breadcrumbs -->
-        <dcc-include src="../author/partials/header.html"> </dcc-include>
-      <!-- End of breadcrumbs -->
-
-      <div class="h-100 w-100 registration-padding">
-        <div>
-          <!--<p id="template-title"></p> -->
-        </div>
-
-        <h1>Log in</h1>
-
-
-        <div class="row">
-
-          <dcc-rest id="harena-login" bind="harena-login"></dcc-rest>
-          <form>
-            <div class="overflow-hidden bg-white shadow sm:rounded-lg">
-              <div class="px-4 py-5 sm:p-6">
-
-                  <div class="form-group">
-                    <div class="mt-1 sm:mt-0 sm:col-span-2">
-                      <div class="max-w-xs rounded-md shadow-sm">
-                        <input
-                          class="block w-full transition duration-150 ease-in-out form-input sm:text-sm sm:leading-5"
-                          id="email"
-                          name="email"
-                          type="text"
-                          placeholder="Enter email"
-                          autofocus>
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- Password Field -->
-                  <div class="form-group">
-                    <div class="mt-1 sm:mt-0 sm:col-span-2">
-                      <div class="max-w-xs rounded-md shadow-sm">
-                        <input
-                          class="block w-full transition duration-150 ease-in-out form-input sm:text-sm sm:leading-5"
-                          id="password"
-                          name="password"
-                          type="password"
-                          placeholder="Enter password"
-                          autofocus>
-                      </div>
-                    </div>
-                  </div>
-                <dcc-submit bind="submit-login" label="Login" connect="harena-login:service/request/post:submit">
-              </div>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </main>
-  <!-- end of div /.container -->
-</body>
-</html>
diff --git a/src/adonisjs/public/player/home/index.html b/src/adonisjs/public/player/home/index.html
index 160e77ff1..89a7b8ffb 100644
--- a/src/adonisjs/public/player/home/index.html
+++ b/src/adonisjs/public/player/home/index.html
@@ -72,7 +72,8 @@
         <div class="container-fluid" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
-              <li class="breadcrumb-item"><a href="/player/home">Home</a></li>
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
+              <li class="breadcrumb-item active" aria-current="page">Case list</li>
             </ol>
           </nav>
         </div>
@@ -87,9 +88,14 @@
             <dcc-dhtml connect="harena-user-cases:service/request/get:retrieve">
               {{@foreach . c}}
               <div id="b{{c.id}}" class="row draft-author-case-container">
-                <div class="col draft-case-title">{{c.title}}</div>
-                <div class="d-flex justify-content-end">
-                  <div id="e{{c.id}}" class="col author-panel-button" onclick="location.href='/player/case?id={{c.id}}'">VIEW</div>
+                <div class="col draft-case-title">
+                  {{c.title}}
+                  <div class="row">
+                    <h6>Created by {{c.author_grade}}: {{c.username}}</h6>
+                  </div>
+                </div>
+                <div class="d-flex justify-content-end ">
+                  <div id="e{{c.id}}" class="col author-panel-button align-self-center pt-2 pb-2" onclick="location.href='/player/case?id={{c.id}}'">VIEW</div>
                 </div>
               </div>
               {{@endfor}}
diff --git a/src/adonisjs/public/templates/simple/case/pocus_challenge.png b/src/adonisjs/public/templates/simple/case/pocus_challenge.png
index f8093d321..45f6a00de 100644
Binary files a/src/adonisjs/public/templates/simple/case/pocus_challenge.png and b/src/adonisjs/public/templates/simple/case/pocus_challenge.png differ
diff --git a/src/adonisjs/public/translator/translator.js b/src/adonisjs/public/translator/translator.js
index c7e5cb654..0cedd1400 100644
--- a/src/adonisjs/public/translator/translator.js
+++ b/src/adonisjs/public/translator/translator.js
@@ -896,7 +896,7 @@ class Translator {
                      compiled[c].input.substring(compiled[c].input.lastIndexOf('.') + 1)
           }
         }
-        
+
         // reinserting context
         this._compileContext(knots, k)
       }
@@ -1048,8 +1048,8 @@ class Translator {
                  .replace(/<video><source src="([^"]+)"><\/video>/igm,
                           '<figure class="media"><oembed url="$1"></oembed></figure>')
 
-      console.log('=== html from markdown')
-      console.log(html)
+      // console.log('=== html from markdown')
+      // console.log(html)
     }
     return html
   }
diff --git a/src/adonisjs/public/user/index.html b/src/adonisjs/public/user/index.html
new file mode 100644
index 000000000..dba541ed4
--- /dev/null
+++ b/src/adonisjs/public/user/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title> Log in | Harena </title>
+  <head>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
+    <!-- @include('layout.template-min') -->
+    <link rel="stylesheet" href="../lib/fontawesome-5-10-1/css/all.min.css">
+    <link rel="stylesheet" href="../lib/bootstrap-4.4.1/css/bootstrap.min.css">
+
+    <link rel="stylesheet" href="../infra/css/common-player.css">
+    <link rel="stylesheet" href="../infra/css/common-author.css">
+
+    <script src="../lib/axios-0.20.0/axios.min.js"></script>
+
+    <script src="../config/config.js"></script>
+    <script src="../infra/bus.js"></script>
+    <script src="../infra/basic.js"></script>
+
+    <script src="../infra/dcc-common-server-proxy.js"></script>
+    <script src="../infra/dcc-common-server-address.js"></script>
+    <script src="../author/js/dcc-author-server-proxy.js "></script>
+
+    <script src="../dccs/dcc.js"></script>
+    <script src="../dccs/components/dcc-base.js "></script>
+    <script src="../dccs/components/dcc-visual.js "></script>
+    <script src="../dccs/components/dcc-block.js"></script>
+    <script src="../dccs/components/dcc-button.js"></script>
+    <script src="../dccs/components/data/dcc-submit.js"></script>
+    <script src="../dccs/components/web/dcc-rest.js"></script>
+    <script src="../dccs/components/dcc-notice-input.js"></script>
+
+    <script src="../infra/dcc-basic.js"></script>
+    <script src="../infra/dcc-rest-proxy.js"></script>
+
+  </head>
+  <body>
+    <!-- Create a section to place page content -->
+    <main role="main">
+      <div class="d-flex flex-column vh-100 vw-100 hidden-overflow">
+
+        <!-- Create breadcrumbs -->
+          <dcc-include src="../author/partials/header.html"> </dcc-include>
+        <!-- End of breadcrumbs -->
+
+        <div class="h-100 w-100 registration-padding">
+          <div>
+            <!--<p id="template-title"></p> -->
+          </div>
+
+          <h1>Log in</h1>
+
+
+          <div class="row">
+
+            <dcc-rest id="harena-login" bind="harena-login"></dcc-rest>
+            <form>
+              <div class="overflow-hidden bg-white shadow sm:rounded-lg">
+                <div class="px-4 py-5 sm:p-6">
+
+                    <div class="form-group">
+                      <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <div class="max-w-xs rounded-md shadow-sm">
+                          <input
+                            class="block w-full transition duration-150 ease-in-out form-input sm:text-sm sm:leading-5"
+                            id="email"
+                            name="email"
+                            type="text"
+                            placeholder="Enter email"
+                            autofocus>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Password Field -->
+                    <div class="form-group">
+                      <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <div class="max-w-xs rounded-md shadow-sm">
+                          <input
+                            class="block w-full transition duration-150 ease-in-out form-input sm:text-sm sm:leading-5"
+                            id="password"
+                            name="password"
+                            type="password"
+                            placeholder="Enter password"
+                            autofocus>
+                        </div>
+                      </div>
+                    </div>
+                  <dcc-submit bind="submit-login" label="Login" connect="harena-login:service/request/post:submit">
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+    <!-- end of div /.container -->
+  </body>
+</html>
diff --git a/src/adonisjs/public/user/settings/index.html b/src/adonisjs/public/user/settings/index.html
new file mode 100644
index 000000000..4c38836bd
--- /dev/null
+++ b/src/adonisjs/public/user/settings/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title> User Settings | Harena </title>
+
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
+    <!-- @include('layout.template-min') -->
+    <link rel="stylesheet" href="../../lib/fontawesome-5-10-1/css/all.min.css">
+    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1/css/bootstrap.min.css">
+
+    <link rel="stylesheet" href="../../infra/css/common-player.css">
+    <link rel="stylesheet" href="../../infra/css/common-author.css">
+
+    <script src="/lib/axios-0.20.0/axios.min.js"></script>
+
+    <script src="/lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
+    <script src="/lib/popper-1-15-0/popper.min.js"></script>
+    <script src="/lib/bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
+
+    <script src="../../config/config.js"></script>
+    <script src="../../infra/bus.js"></script>
+    <script src="../../infra/basic.js"></script>
+    <script src="../../infra/dcc-common-server-proxy.js"></script>
+    <script src="../../infra/dcc-common-server-address.js"></script>
+    <script src="../../infra/token-validator.js"></script>
+
+    <script src="../../author/js/dcc-author-server-proxy.js "></script>
+
+    <script src="../../dccs/dcc.js"></script>
+    <script src="../../dccs/components/dcc-base.js "></script>
+    <script src="../../dccs/components/dcc-visual.js "></script>
+    <script src="../../dccs/components/dcc-block.js"></script>
+    <script src="../../dccs/components/dcc-button.js"></script>
+    <script src="../../dccs/components/data/dcc-submit.js"></script>
+    <script src="../../dccs/components/web/dcc-rest.js"></script>
+    <script src="../../dccs/components/dcc-notice-input.js"></script>
+
+    <script src="../../infra/dcc-basic.js"></script>
+    <script src="../../infra/dcc-rest-proxy.js"></script>
+
+  </head>
+  <body>
+    <!-- Create a section to place page content -->
+    <main role="main">
+      <div class="d-flex flex-column vh-100 vw-100 hidden-overflow">
+
+        <!-- Create breadcrumbs -->
+          <dcc-include src="../../author/partials/header.html"> </dcc-include>
+        <!-- End of breadcrumbs -->
+
+        <div class="h-100 w-100 registration-padding">
+          <div>
+            <!--<p id="template-title"></p> -->
+          </div>
+
+          <h1>Change Password</h1>
+
+
+          <div class="row">
+
+            <dcc-rest id="harena-change-password" bind="harena-change-password"></dcc-rest>
+            <form>
+              <div class="overflow-hidden bg-white shadow sm:rounded-lg">
+                <div class="px-4 py-5">
+
+                  <div class="form-group">
+                    <div class="mt-1">
+                      <div class="col rounded-md shadow-sm">
+                        <label for="oldPassword"  class="row">Enter current password</label>
+                        <input
+                          class="row block w-full transition duration-150 ease-in-out form-input sm:text-sm sm:leading-5"
+                          id="oldPassword"
+                          name="oldPassword"
+                          type="password"
+                          placeholder="Enter current password"
+                          autofocus>
+                      </div>
+                    </div>
+                  </div>
+
+                    <!-- Password Field -->
+                    <div class="form-group">
+                      <div class="mt-1">
+                        <div class="col rounded-md shadow-sm">
+                          <label for="newPassword" class="row">Enter new password</label>
+                          <input
+                            class=" row block w-full transition duration-150 ease-in-out form-input sm:text-sm sm:leading-5"
+                            id="newPassword"
+                            name="newPassword"
+                            type="password"
+                            placeholder="Enter new password"
+                            autofocus>
+                        </div>
+                      </div>
+                    </div>
+                  <dcc-submit bind="submit-change-password" xstyle="btn btn-primary" label="Submit" connect="harena-change-password:service/request/put:submit">
+                </div>
+                <div id="updatePasswordResponse" class="text-success col-11 text-wrap text-center mb-3"></div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+    <!-- end of div /.container -->
+  </body>
+</html>