diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..93940b0c
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,10 @@
+## Version 1.3.0 - in dev
+
+### New Features
+
+* Maps can now contain "group" layers (layers that contain other layers) - #899 #779 (@Lurkars @moufmouf)
+
+### Updates
+
+
+### Bug Fixes
diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
new file mode 100644
index 00000000..1c806a6f
--- /dev/null
+++ b/front/dist/resources/html/CustomCharacterScene.html
@@ -0,0 +1,159 @@
+<style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
+    #customizeScene {
+        background: #0000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 10px auto 0;
+        color: #ebeeee;
+        overflow: scroll;
+        width: 42vw;
+        height: 38vh;
+        /*max-width: 300px;*/
+        max-height: 40vh;
+    }
+    #customizeScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #customizeScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #customizeScene section {
+        margin: 10px;
+    }
+    #customizeScene section.action {
+        text-align: center;
+        position: sticky;
+        bottom: 0;
+        top: 100%;
+    }
+    #customizeScene section.action.action-move { 
+        top: 55%;
+    }
+    #customizeScene button {
+        margin: 2px 10px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+    }
+    #customizeScene button#customizeSceneFormCancel {
+        background-color: #aca6a600;
+        color: #292929;
+    }
+    #customizeScene section h6,
+    #customizeScene section h5{
+        margin: 1px;
+    }
+    #customizeScene section.text-center{
+        text-align: center;
+    }
+    #customizeScene section a{
+        font-size: 14px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #customizeScene section a:hover{
+        font-weight: 700;
+    }
+    #customizeScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #customizeScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #customizeScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #customizeScene section input#customizeSceneLink{
+        background-color: #a1a3a3;
+    }
+    #customizeScene section button.customizeSceneButton{
+        position: absolute;
+        margin: 0;
+        top: -8vh;
+        font-size: 10px;
+        padding: 2px 4px;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonLeft{
+        left: 0vw;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonRight{
+        right: 0vw;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonUp{
+        left: calc(2vw + 40px);
+        transform: rotate(90deg);
+        margin-top: -20px;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonDown{
+        right: calc(2vw + 40px);
+        transform: rotate(90deg);
+        margin-top: 20px;
+    }
+    #customizeScene section.action img{
+        width: 8px;
+        height: 8px;
+    }
+    #customizeScene section.action a#customizeSceneFormBack img{
+        margin-top: -2px;
+    }
+    #customizeScene section.action button#customizeSceneFormSubmit img{
+        transform: rotate(180deg);
+    }
+    @media only screen and (max-width: 600px) {
+        #customizeScene {
+            max-width: 160px;
+        }
+    }
+    @media only screen and (max-height: 400px) {
+        #customizeScene section.action {
+            top: 92%;
+        }
+        #customizeScene section.action.action-move { 
+            top: 80%;
+        }
+    }
+</style>
+
+<form id="customizeScene" hidden>
+    <section class="text-center">
+        <h5>Custom your WOKA</h3>
+    </section>
+    <section class="action action-move">
+        <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
+        <button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
+        <!--<button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
+        <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
+    </section>
+    <section class="action">
+        <a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
+        <button type="submit" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/EnableCameraScene.html b/front/dist/resources/html/EnableCameraScene.html
new file mode 100644
index 00000000..6f22dd31
--- /dev/null
+++ b/front/dist/resources/html/EnableCameraScene.html
@@ -0,0 +1,123 @@
+<style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
+    #enableCameraScene {
+        background: #000000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 20px auto 0;
+        color: #ebeeee;
+        max-height: 40vh;
+        width: 42vw;
+        max-width: 300px;
+        /*overflow: scroll;*/
+    }
+    #enableCameraScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #enableCameraScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #enableCameraScene section.title {
+        position: absolute;
+        top: 1vh;
+        width: 100%;
+    }
+    #enableCameraScene section.action{
+        text-align: center;
+        margin: 0;
+        position: absolute;
+        top: 40vh;
+        width: 100%;
+    }
+    #enableCameraScene button {
+        margin: 10px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+    }
+    #enableCameraScene button#enableCameraSceneFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    #enableCameraScene section h6,
+    #enableCameraScene section h5{
+        margin: 1px;
+    }
+    #enableCameraScene section.text-center{
+        text-align: center;
+    }
+    #enableCameraScene section a{
+        font-size: 8px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #enableCameraScene section a:hover{
+        font-weight: 700;
+    }
+    #enableCameraScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #enableCameraScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #enableCameraScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #enableCameraScene section input#enableCameraSceneLink{
+        background-color: #a1a3a3;
+    }
+    #enableCameraScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
+</style>
+
+<form id="enableCameraScene" hidden>
+    <!-- FIX me -->
+    <section class="title text-center">
+        <h5>Turn on your camera and microphone</h5>
+    </section>
+    <!--<section class="text-center">
+        <video id="myCamVideoSetup" autoplay muted></video>
+    </section>
+    <section class="text-center">
+        <h5>Select your camera</h3>
+        <select id="camera">
+        </select>
+    </section>
+    <section class="text-center">
+        <h5>Select your michrophone</h3>
+        <select id="michrophone">
+        </select>
+    </section>-->
+    <section class="action">
+        <button type="submit" id="enableCameraSceneFormSubmit">Let's go!</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/SelectCharacterScene.html b/front/dist/resources/html/SelectCharacterScene.html
new file mode 100644
index 00000000..9425cfbb
--- /dev/null
+++ b/front/dist/resources/html/SelectCharacterScene.html
@@ -0,0 +1,140 @@
+<style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
+    #selectCharacterScene {
+        background: #0000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 10px auto 0;
+        color: #ebeeee;
+        max-height: 40vh;
+        overflow: scroll;
+        max-width: 300px;
+        width: 40vw;
+        overflow: unset;
+    }
+    #selectCharacterScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #selectCharacterScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #selectCharacterScene section {
+        margin: 10px;
+    }
+    #selectCharacterScene section.action {
+        text-align: center;
+        margin: 0;
+        margin-top: 28vh;
+    }
+    #selectCharacterScene button {
+        margin: 10px 0px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 100px;
+    }
+    #selectCharacterScene button#selectCharacterSceneFormCancel {
+        background-color: #aca6a600;
+        color: #292929;
+    }
+    #selectCharacterScene section h6,
+    #selectCharacterScene section h5{
+        margin: 1px;
+    }
+    #selectCharacterScene section.text-center{
+        text-align: center;
+    }
+    #selectCharacterScene section a{
+        font-size: 8px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #selectCharacterScene section a:hover{
+        font-weight: 700;
+    }
+    #selectCharacterScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #selectCharacterScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #selectCharacterScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #selectCharacterScene section input#selectCharacterSceneLink{
+        background-color: #a1a3a3;
+    }
+    #selectCharacterScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
+    #selectCharacterScene section button.selectCharacterButton{
+        position: absolute;
+        top: 20vh;
+        margin: 0;
+        width: 25px;
+    }
+    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
+        display: none;
+        left: 1vw;
+    }
+    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
+        display: none;
+        right: 1vw;
+    }
+    #selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
+        font-size: 14px;
+        width: auto;
+        margin-top: -2px;
+        background-color: #ffd700;
+        color: black;
+    }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
+            display: block;
+        }
+        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
+            display: block;
+        }
+    }
+</style>
+
+<form id="selectCharacterScene" hidden>
+    <section class="text-center">
+        <h5>Select your WOKA</h5>
+        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
+        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
+    </section>
+    <section class="action">
+        <button type="submit" id="selectCharacterSceneFormSubmit">Continue</button>
+        <button type="submit" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your WOKA</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/SelectCompanionScene.html b/front/dist/resources/html/SelectCompanionScene.html
new file mode 100644
index 00000000..8112f035
--- /dev/null
+++ b/front/dist/resources/html/SelectCompanionScene.html
@@ -0,0 +1,128 @@
+<style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
+    #selectCompanionScene {
+        background: #0000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 10px auto 0;
+        color: #ebeeee;
+        max-height: 40vh;
+        overflow: scroll;
+        max-width: 300px;
+        width: 40vw;
+    }
+    #selectCompanionScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #selectCompanionScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #selectCompanionScene section {
+        margin: 10px;
+    }
+    #selectCompanionScene section.action {
+        text-align: center;
+        margin: 0;
+        margin-top: 20vh;
+    }
+    #selectCompanionScene button {
+        margin: 10px 4px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 100px;
+    }
+    #selectCompanionScene button#selectCompanionSceneFormCancel {
+        background-color: #aca6a600;
+        color: #292929;
+    }
+    #selectCompanionScene section h6,
+    #selectCompanionScene section h5{
+        margin: 1px;
+    }
+    #selectCompanionScene section.text-center{
+        text-align: center;
+    }
+    #selectCompanionScene section a{
+        font-size: 14px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #selectCompanionScene section a:hover{
+        font-weight: 700;
+    }
+    #selectCompanionScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #selectCompanionScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #selectCompanionScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #selectCompanionScene section input#selectCompanionSceneLink{
+        background-color: #a1a3a3;
+    }
+    #selectCompanionScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
+    #selectCompanionScene section button.selectCharacterButton{
+        position: absolute;
+        top: 20vh;
+        margin: 0;
+        width: 25px;
+    }
+    #selectCompanionScene section button.selectCharacterButton#selectCharacterButtonLeft{
+        left: 1vw;
+    }
+    #selectCompanionScene section button.selectCharacterButton#selectCharacterButtonRight{
+        right: 1vw;
+    }
+    #selectCompanionScene section button#selectCompanionSceneFormCustomYourOwnSubmit{
+        font-size: 14px;
+        width: auto;
+        margin-top: -2px;
+        background-color: #ffd700;
+        color: black;
+    }
+</style>
+
+<form id="selectCompanionScene" hidden>
+    <section class="text-center">
+        <h5>Select your WOKA</h5>
+        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
+        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
+    </section>
+    <section class="action">
+        <a herf="#" id="selectCompanionSceneFormBack">Back</a>
+        <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html
index ce740ec5..6abf2753 100644
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@@ -1,4 +1,10 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
+    #gameMenu main{
+        margin-top: 15px;
+    }
     #gameMenu button {
         background-color: black;
         color: white;
@@ -16,6 +22,21 @@
         width: 32px;
         cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
+    @media only screen and (max-height: 700px) {
+        #gameMenu main {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            margin-top: 0;
+        }
+        #gameMenu section{
+            margin: 2px;
+        }
+        section#socialLinks{
+            position: relative;
+        }
+    }
 </style>
 
 <div id="gameMenu" hidden>
diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html
index 946cb60a..e0a1f782 100644
--- a/front/dist/resources/html/gameMenuIcon.html
+++ b/front/dist/resources/html/gameMenuIcon.html
@@ -1,10 +1,12 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #menuIcon button {
         background-color: black;
         color: white;
         border-radius: 7px;
-        height: 28px;
-        width: 34px;
+        padding: 2px 8px;
     }
     #menuIcon button img{
         width: 14px;
@@ -14,6 +16,11 @@
     #menuIcon section {
         margin: 10px;
     }
+    @media only screen and (max-height: 700px) {
+        #menuIcon section {
+            margin: 2px;
+        }
+    }
 </style>
 <main id="menuIcon" hidden>
     <section>
diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html
index dc818089..09c74dee 100644
--- a/front/dist/resources/html/gameQualityMenu.html
+++ b/front/dist/resources/html/gameQualityMenu.html
@@ -1,11 +1,14 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameQuality {
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
-        height: 257px;
         margin: 20px auto 0;
-        width: 298px;
+        width: 50vw;
+        max-width: 300px;
     }
     #gameQuality .cautiousText {
         font-size: 50%;
@@ -33,7 +36,7 @@
         color: #696969;
         height: 30px;
         transition: box-shadow 0.3s;
-        width: 240px;
+        width: 100%;
     }
     #gameQuality section {
         margin: 10px;
@@ -42,12 +45,11 @@
         text-align: center;
     }
     #gameQuality button {
-        margin-top: 10px;
+        margin: 10px;
         background-color: black;
         color: white;
         border-radius: 7px;
         padding-bottom: 4px;
-        width: 60px;
     }
     #gameQuality button#gameQualityFormCancel {
         background-color: #c7c7c700;
@@ -57,7 +59,7 @@
 
 <form id="gameQuality" hidden>
     <section>
-        <h3>Game quality</h3>
+        <h5>Game quality</h3>
         <p class="cautiousText">(Editing these settings will restart the game)</p>
         <select id="select-game-quality">
             <option value="120">High video quality (120 fps)</option>
@@ -67,7 +69,7 @@
         </select>
     </section>
     <section>
-        <h3>Video quality</h3>
+        <h5>Video quality</h3>
         <select id="select-video-quality">
             <option value="30">High video quality (30 fps)</option>
             <option value="20">Medium video quality (20 fps, recommended)</option>
diff --git a/front/dist/resources/html/gameReport.html b/front/dist/resources/html/gameReport.html
index d35ae556..9ea16b74 100644
--- a/front/dist/resources/html/gameReport.html
+++ b/front/dist/resources/html/gameReport.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameReport {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/gameShare.html b/front/dist/resources/html/gameShare.html
index 60c2ee0f..00222437 100644
--- a/front/dist/resources/html/gameShare.html
+++ b/front/dist/resources/html/gameShare.html
@@ -1,11 +1,14 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameShare {
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
         margin: 20px auto 0;
-        width: 298px;
-        height: 160px;
+        width: 50vw;
+        max-width: 400px;
     }
     #gameShare h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -40,7 +43,7 @@
         margin: 0;
     }
     #gameShare button {
-        margin-top: 10px;
+        margin: 10px;
         background-color: black;
         color: white;
         border-radius: 7px;
@@ -66,7 +69,7 @@
     }
     #gameShare section p{
         font-size: 8px;
-        margin: 0px 70px;
+        margin: 0;
     }
     #gameShare section p.err{
         color: red;
diff --git a/front/dist/resources/html/helpCameraSettings.html b/front/dist/resources/html/helpCameraSettings.html
index 34b1502a..557c6eff 100644
--- a/front/dist/resources/html/helpCameraSettings.html
+++ b/front/dist/resources/html/helpCameraSettings.html
@@ -1,11 +1,16 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #helpCameraSettings {
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
-        margin: 10px auto 0;
+        margin: 25px auto 0;
         width: 400px;
-        height: 370px;
+        max-height: calc(50vh - 25px);
+        overflow: scroll;
+        max-width: 48vw;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -20,18 +25,6 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #helpCameraSettings input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-    }
     #helpCameraSettings section {
         margin: 10px;
     }
@@ -40,7 +33,7 @@
         margin: 0;
     }
     #helpCameraSettings button {
-        margin-top: 10px;
+        margin: 10px 4px;
         background-color: black;
         color: white;
         border-radius: 7px;
@@ -51,9 +44,8 @@
         color: #292929;
     }
     #helpCameraSettings section a{
-        text-align: center;
         font-size: 12px;
-        margin: 0 6px;
+        text-decoration: underline;
         color: black;
     }
     #helpCameraSettings section h6,
@@ -97,7 +89,7 @@
         <p id='browserHelpSetting'></p>
     </section>
     <section class="action">
-        <button type="submit" id="helpCameraSettingsFormRefresh">Refresh</button>
+        <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
         <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
     </section>
 </form>
diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html
new file mode 100644
index 00000000..a17cf9b5
--- /dev/null
+++ b/front/dist/resources/html/loginScene.html
@@ -0,0 +1,114 @@
+<style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
+    #loginScene {
+        background: #000000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 20px auto 0;
+        width: 90%;
+        max-width: 200px;
+        color: #ebeeee;
+        max-height: 40vh;
+        overflow: scroll;
+    }
+    #loginScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #loginScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #loginScene section {
+        margin: 10px;
+    }
+    #loginScene section.action{
+        text-align: center;
+        margin: 0;
+    }
+    #loginScene button {
+        margin: 10px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 100px;
+    }
+    #loginScene button#loginSceneFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    #loginScene section h6,
+    #loginScene section h5{
+        margin: 1px;
+    }
+    #loginScene section.text-center{
+        text-align: center;
+    }
+    #loginScene section a{
+        font-size: 8px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #loginScene section a:hover{
+        font-weight: 700;
+    }
+    #loginScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #loginScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #loginScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #loginScene section input#loginSceneLink{
+        background-color: #a1a3a3;
+    }
+    #loginScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
+</style>
+
+<form id="loginScene" hidden>
+    <section class="text-center">
+        <img src="resources/logos/logo.png">
+    </section>
+    <section class="text-center">
+        <h5>Enter your name</h5>
+        <p class="info">9 chars maximum</p>
+        <p class="err" id="errorLoginScene"></p>
+    </section>
+    <section>
+        <input type="text" name="email" id="loginSceneName">
+        <p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
+    </section>
+    <section class="action">
+        <button type="submit" id="loginSceneFormSubmit">Continue</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/warningContainer.html b/front/dist/resources/html/warningContainer.html
index 832ac4da..4989c49d 100644
--- a/front/dist/resources/html/warningContainer.html
+++ b/front/dist/resources/html/warningContainer.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #warningMain {
         border-radius: 5px;
         height: 100px;
diff --git a/front/dist/resources/objects/play_button.png b/front/dist/resources/objects/play_button.png
deleted file mode 100644
index 36aa309b..00000000
Binary files a/front/dist/resources/objects/play_button.png and /dev/null differ
diff --git a/front/dist/resources/style/cowebsite-mobile.scss b/front/dist/resources/style/cowebsite-mobile.scss
new file mode 100644
index 00000000..85b41511
--- /dev/null
+++ b/front/dist/resources/style/cowebsite-mobile.scss
@@ -0,0 +1,49 @@
+@media (max-aspect-ratio: 1/1) {
+
+    #main-container {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+  
+  
+    #cowebsite {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 50%;
+      display: flex;
+      flex-direction: column-reverse;
+  
+      &.loading {
+        transform: translateY(-90%);
+      }
+      &.hidden {
+        transform: translateY(-100%);
+      }
+  
+      main {
+        height: 100%;
+      }
+  
+  
+      aside {
+        height: 30px;
+        cursor: ns-resize;
+        flex-direction: column;
+  
+        img {
+          cursor: ns-resize;
+        }
+      }
+  
+      .top-right-btn {
+        &#cowebsite-close {
+          right: 0;
+        }
+        &#cowebsite-fullscreen {
+          left: 0;
+        }
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss
index b752728d..515dc0df 100644
--- a/front/dist/resources/style/cowebsite.scss
+++ b/front/dist/resources/style/cowebsite.scss
@@ -87,51 +87,3 @@
     }
   }
 }
-@media (max-aspect-ratio: 1/1) {
-  
-  #main-container {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-
-  #cowebsite {
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 50%;
-    display: flex;
-    flex-direction: column-reverse;
-
-    &.loading {
-      transform: translateY(-90%);
-    }
-    &.hidden {
-      transform: translateY(-100%);
-    }
-
-    main {
-      height: 100%;
-    }
-
-
-    aside {
-      height: 30px;
-      cursor: ns-resize;
-      flex-direction: column;
-      
-      img {
-        cursor: ns-resize;
-      }
-    }
-
-    .top-right-btn {
-      &#cowebsite-close {
-        right: 0px;
-      }
-      &#cowebsite-fullscreen {
-        right: 25px;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss
index 4d0355b7..67e85c5b 100644
--- a/front/dist/resources/style/index.scss
+++ b/front/dist/resources/style/index.scss
@@ -1,2 +1,4 @@
 @import "cowebsite.scss";
-@import "style.css";
\ No newline at end of file
+@import "cowebsite-mobile.scss";
+@import "style.css";
+@import "mobile-style.scss";
\ No newline at end of file
diff --git a/front/dist/resources/style/mobile-style.scss b/front/dist/resources/style/mobile-style.scss
new file mode 100644
index 00000000..d9ed4b2e
--- /dev/null
+++ b/front/dist/resources/style/mobile-style.scss
@@ -0,0 +1,59 @@
+@media screen and (max-width: 700px),
+        screen and (max-height: 700px){
+  video#myCamVideo {
+    width: 150px;
+  }
+
+  .sidebar {
+    width: 20%;
+    min-width: 200px;
+    position: absolute;
+    display: block;
+    right: 0;
+    height: 80%;
+
+    &> div {
+      max-height: 120px;
+      min-width: 200px;
+    }
+
+    .video-container{
+      min-width: 200px;
+    }
+  }
+
+  .btn-cam-action {
+    &:hover{
+      transform: translateY(20px);
+    }
+    div {
+      &:hover {
+        background-color: #666;
+      }
+
+      bottom: 30px;
+
+      &.btn-micro {
+        right: 0;
+      }
+
+      &.btn-monitor {
+        right: 130px;
+      }
+
+      &.btn-video {
+        right: 65px;
+      }
+    }
+  }
+
+  .main-section {
+    position: absolute;
+    width: 100%;
+    min-width: 400px;
+
+    & > div {
+      z-index: 2;
+    }
+  }
+}
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index ff79245c..7db93329 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -53,6 +53,7 @@ body .message-info.warning{
     padding-top: 32px;
     font-size: 28px;
     color: white;
+    overflow: hidden;
 }
 
 .video-container img{
@@ -338,24 +339,6 @@ body {
 
     
 }
-@media (max-aspect-ratio: 1/1) {
-    .game-overlay {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        flex-direction: row;
-        align-items: flex-end;
-    }
-
-    .sidebar > div {
-        max-width: 21%;
-    }
-
-    .sidebar > div:hover {
-        max-width: 25%;
-    }
-}
 
 #game {
     width: 100%;
@@ -1046,7 +1029,7 @@ div.modal-report-user{
 
 .discussion .messages{
     position: absolute;
-    height: calc(100% - 360px);
+    height: calc(100% - 390px);
     overflow-x: hidden;
     overflow-y: auto;
     max-width: calc(100% - 40px);
diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 11479b0f..5d6a5ea6 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -17,6 +17,8 @@ const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new
 export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
 export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
 
+export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
+
 export {
     DEBUG_MODE,
     START_ROOM_URL,
diff --git a/front/src/Phaser/Components/TextUtils.ts b/front/src/Phaser/Components/TextUtils.ts
new file mode 100644
index 00000000..beee840a
--- /dev/null
+++ b/front/src/Phaser/Components/TextUtils.ts
@@ -0,0 +1,53 @@
+import {ITiledMapObject} from "../Map/ITiledMap";
+import Text = Phaser.GameObjects.Text;
+import {GameScene} from "../Game/GameScene";
+import TextStyle = Phaser.GameObjects.TextStyle;
+
+export class TextUtils {
+    public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
+        if (object.text === undefined) {
+            throw new Error('This object has not textual representation.');
+        }
+        const options: {
+            fontStyle?: string,
+            fontSize?: string,
+            fontFamily?: string,
+            color?: string,
+            align?: string,
+            wordWrap?: {
+                width: number,
+                useAdvancedWrap?: boolean
+            }
+        } = {};
+        if (object.text.italic) {
+            options.fontStyle = 'italic';
+        }
+        // Note: there is no support for "strikeout" and "underline"
+        let fontSize: number = 16;
+        if (object.text.pixelsize) {
+            fontSize = object.text.pixelsize;
+        }
+        options.fontSize = fontSize + 'px';
+        if (object.text.fontfamily) {
+            options.fontFamily = '"'+object.text.fontfamily+'"';
+        }
+        let color = '#000000';
+        if (object.text.color !== undefined) {
+            color = object.text.color;
+        }
+        options.color = color;
+        if (object.text.wrap === true) {
+            options.wordWrap = {
+                width: object.width,
+                //useAdvancedWrap: true
+            }
+        }
+        if (object.text.halign !== undefined) {
+            options.align = object.text.halign;
+        }
+
+        console.warn(options);
+        const textElem = scene.add.text(object.x, object.y, object.text.text, options);
+        textElem.setAngle(object.rotation);
+    }
+}
diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts
index 110a29d6..5fe91b62 100644
--- a/front/src/Phaser/Game/GameMap.ts
+++ b/front/src/Phaser/Game/GameMap.ts
@@ -1,4 +1,5 @@
-import {ITiledMap} from "../Map/ITiledMap";
+import {ITiledMap, ITiledMapLayer} from "../Map/ITiledMap";
+import {LayersIterator} from "../Map/LayersIterator";
 
 export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void;
 
@@ -10,8 +11,10 @@ export class GameMap {
     private key: number|undefined;
     private lastProperties = new Map<string, string|boolean|number>();
     private callbacks = new Map<string, Array<PropertyChangeCallback>>();
+    public readonly layersIterator: LayersIterator;
 
     public constructor(private map: ITiledMap) {
+        this.layersIterator = new LayersIterator(map);
     }
 
     /**
@@ -55,7 +58,7 @@ export class GameMap {
     private getProperties(key: number): Map<string, string|boolean|number> {
         const properties = new Map<string, string|boolean|number>();
 
-        for (const layer of this.map.layers) {
+        for (const layer of this.layersIterator) {
             if (layer.type !== 'tilelayer') {
                 continue;
             }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 56647cfc..2995fbc0 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -18,7 +18,15 @@ import {
     RESOLUTION,
     ZOOM_LEVEL
 } from "../../Enum/EnvironmentVariable";
-import {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledMapObject, ITiledTileSet} from "../Map/ITiledMap";
+import {
+    ITiledMap,
+    ITiledMapLayer,
+    ITiledMapLayerProperty,
+    ITiledMapObject,
+    ITiledText,
+    ITiledMapTileLayer,
+    ITiledTileSet
+} from "../Map/ITiledMap";
 import {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
@@ -78,6 +86,8 @@ import EVENT_TYPE =Phaser.Scenes.Events
 import {Subscription} from "rxjs";
 import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
+import {TextUtils} from "../Components/TextUtils";
+import {LayersIterator} from "../Map/LayersIterator";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
@@ -136,7 +146,7 @@ export class GameScene extends ResizableScene implements CenterListener {
     pendingEvents: Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface>();
     private initPosition: PositionInterface|null = null;
     private playersPositionInterpolator = new PlayersPositionInterpolator();
-    public connection!: RoomConnection;
+    public connection: RoomConnection|undefined;
     private simplePeer!: SimplePeer;
     private GlobalMessageManager!: GlobalMessageManager;
     public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
@@ -387,8 +397,9 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         //add layer on map
         this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>();
+
         let depth = -2;
-        for (const layer of this.mapFile.layers) {
+        for (const layer of this.gameMap.layersIterator) {
             if (layer.type === 'tilelayer') {
                 this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
 
@@ -404,9 +415,16 @@ export class GameScene extends ResizableScene implements CenterListener {
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
                 depth = 10000;
             }
+            if (layer.type === 'objectgroup') {
+                for (const object of layer.objects) {
+                    if (object.text) {
+                        TextUtils.createTextFromITiledMapObject(this, object);
+                    }
+                }
+            }
         }
         if (depth === -2) {
-            throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at.');
+            throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at. This layer cannot be contained in a group.');
         }
 
         this.initStartXAndStartY();
@@ -417,7 +435,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         //initialise list of other player
         this.MapPlayers = this.physics.add.group({immovable: true});
 
-        
+
         //create input to move
         mediaManager.setUserInputManager(this.userInputManager);
         this.userInputManager = new UserInputManager(this);
@@ -713,7 +731,7 @@ export class GameScene extends ResizableScene implements CenterListener {
                     if (JITSI_PRIVATE_MODE && !jitsiUrl) {
                         const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined;
 
-                        this.connection.emitQueryJitsiJwtMessage(roomName, adminTag);
+                        this.connection?.emitQueryJitsiJwtMessage(roomName, adminTag);
                     } else {
                         this.startJitsi(roomName, undefined);
                     }
@@ -736,9 +754,9 @@ export class GameScene extends ResizableScene implements CenterListener {
         });
         this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
             if (newValue === undefined || newValue === false || newValue === '') {
-                this.connection.setSilent(false);
+                this.connection?.setSilent(false);
             } else {
-                this.connection.setSilent(true);
+                this.connection?.setSilent(true);
             }
         });
         this.gameMap.onPropertyChange('playAudio', (newValue, oldValue, allProps) => {
@@ -964,13 +982,14 @@ ${escapedMessage}
     }
 
     private initPositionFromLayerName(layerName: string) {
-        for (const layer of this.mapFile.layers) {
-            if (layerName === layer.name && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) {
+        for (const layer of this.gameMap.layersIterator) {
+            if ((layerName === layer.name || layer.name.endsWith('/'+layerName)) && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) {
                 const startPosition = this.startUser(layer);
                 this.startX = startPosition.x + this.mapFile.tilewidth/2;
                 this.startY = startPosition.y + this.mapFile.tileheight/2;
             }
         }
+
     }
 
     private getExitUrl(layer: ITiledMapLayer): string|undefined {
@@ -993,7 +1012,7 @@ ${escapedMessage}
     }
 
     private getProperty(layer: ITiledMapLayer|ITiledMap, name: string): string|boolean|number|undefined {
-        const properties: ITiledMapLayerProperty[] = layer.properties;
+        const properties: ITiledMapLayerProperty[]|undefined = layer.properties;
         if (!properties) {
             return undefined;
         }
@@ -1005,7 +1024,7 @@ ${escapedMessage}
     }
 
     private getProperties(layer: ITiledMapLayer|ITiledMap, name: string): (string|number|boolean|undefined)[] {
-        const properties: ITiledMapLayerProperty[] = layer.properties;
+        const properties: ITiledMapLayerProperty[]|undefined = layer.properties;
         if (!properties) {
             return [];
         }
@@ -1019,7 +1038,7 @@ ${escapedMessage}
         await gameManager.loadMap(room, this.scene);
     }
 
-    private startUser(layer: ITiledMapLayer): PositionInterface {
+    private startUser(layer: ITiledMapTileLayer): PositionInterface {
         const tiles = layer.data;
         if (typeof(tiles) === 'string') {
             throw new Error('The content of a JSON map must be filled as a JSON array, not as a string');
@@ -1175,7 +1194,7 @@ ${escapedMessage}
         this.lastMoveEventSent = event;
         this.lastSentTick = this.currentTick;
         const camera = this.cameras.main;
-        this.connection.sharePosition(event.x, event.y, event.direction, event.moving, {
+        this.connection?.sharePosition(event.x, event.y, event.direction, event.moving, {
             left: camera.scrollX,
             top: camera.scrollY,
             right: camera.scrollX + camera.width,
@@ -1241,7 +1260,7 @@ ${escapedMessage}
      * Put all the players on the map on map load.
      */
     private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
-        const currentPlayerId = this.connection.getUserId();
+        const currentPlayerId = this.connection?.getUserId();
         this.removeAllRemotePlayers();
         // load map
         usersPosition.forEach((userPosition : MessageUserPositionInterface) => {
@@ -1385,7 +1404,7 @@ ${escapedMessage}
      * Sends to the server an event emitted by one of the ActionableItems.
      */
     emitActionableEvent(itemId: number, eventName: string, state: unknown, parameters: unknown) {
-        this.connection.emitActionableEvent(itemId, eventName, state, parameters);
+        this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
     public onResize(): void {
@@ -1393,7 +1412,7 @@ ${escapedMessage}
 
         // Send new viewport to server
         const camera = this.cameras.main;
-        this.connection.setViewport({
+        this.connection?.setViewport({
             left: camera.scrollX,
             top: camera.scrollY,
             right: camera.scrollX + camera.width,
@@ -1449,7 +1468,7 @@ ${escapedMessage}
         const jitsiUrl = allProps.get("jitsiUrl") as string|undefined;
 
         jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl);
-        this.connection.setSilent(true);
+        this.connection?.setSilent(true);
         mediaManager.hideGameOverlay();
 
         //permit to stop jitsi when user close iframe
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 3b27f01e..8e74b182 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -1,54 +1,32 @@
 import {EnableCameraSceneName} from "./EnableCameraScene";
-import {TextField} from "../Components/TextField";
-import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {loadAllLayers, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
+import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
 import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
-import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
 import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import { MenuScene } from "../Menu/MenuScene";
+import { SelectCharacterSceneName } from "./SelectCharacterScene";
 
 export const CustomizeSceneName = "CustomizeScene";
 
-enum CustomizeTextures{
-    icon = "icon",
-    arrowRight = "arrow_right",
-    mainFont = "main_font",
-    arrowUp = "arrow_up",
-}
+export const CustomizeSceneKey = "CustomizeScene";
+const customizeSceneKey = 'customizeScene';
 
 export class CustomizeScene extends AbstractCharacterScene {
-
-    private textField!: TextField;
-    private enterField!: TextField;
-
-    private arrowRight!: Image;
-    private arrowLeft!: Image;
-
-    private arrowDown!: Image;
-    private arrowUp!: Image;
-
     private Rectangle!: Rectangle;
 
-    private mobileTapUP!: Rectangle;
-    private mobileTapDOWN!: Rectangle;
-    private mobileTapLEFT!: Rectangle;
-    private mobileTapRIGHT!: Rectangle;
-
-    private mobileTapENTER!: Rectangle;
-
-    private logo!: Image;
-
     private selectedLayers: number[] = [0];
     private containersRow: Container[][] = [];
     private activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
+    private customizeSceneElement!: Phaser.GameObjects.DOMElement;
+
     constructor() {
         super({
             key: CustomizeSceneName
@@ -58,6 +36,8 @@ export class CustomizeScene extends AbstractCharacterScene {
     preload() {
         addLoader(this);
 
+        this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
+
         this.layers = loadAllLayers(this.load);
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
@@ -67,106 +47,42 @@ export class CustomizeScene extends AbstractCharacterScene {
                 this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
             });
         });
-
-        this.load.image(CustomizeTextures.arrowRight, "resources/objects/arrow_right.png");
-        this.load.image(CustomizeTextures.icon, "resources/logos/tcm_full.png");
-        this.load.image(CustomizeTextures.arrowUp, "resources/objects/arrow_up.png");
-        this.load.bitmapFont(CustomizeTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
     create() {
-        this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!');
+        const middleX = this.getMiddleX();
+        this.customizeSceneElement = this.add.dom(middleX, 0).createFromCache(customizeSceneKey);
+        MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
 
-        this.enterField = new TextField(this, this.game.renderer.width / 2, 60, 'Start the game by pressing ENTER\n\n or touching the center rectangle');
+        this.customizeSceneElement.addListener('click');
+        this.customizeSceneElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'customizeSceneButtonLeft') {
+                this.moveCursorHorizontally(-1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonRight') {
+                this.moveCursorHorizontally(1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonDown') {
+                this.moveCursorVertically(1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonUp') {
+                this.moveCursorVertically(-1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneFormBack') {
+                if(this.activeRow > 0){
+                    this.moveCursorVertically(-1);
+                }else{
+                    this.backToPreviousScene();
+                }
+            }else if((event?.target as HTMLButtonElement).id === 'customizeSceneFormSubmit') {
+                if(this.activeRow < 5){
+                    this.moveCursorVertically(1);
+                }else{
+                    this.nextSceneToCamera();
+                }
+            }
+        });
 
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
-        this.add.existing(this.logo);
-
-
-        this.arrowRight = new Image(this, this.game.renderer.width*0.9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
-        this.add.existing(this.arrowRight);
-        this.mobileTapRIGHT = this.add
-          .rectangle(
-            this.game.renderer.width*0.9,
-            this.game.renderer.height/2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorHorizontally(1);
-          });
-
-        this.arrowLeft = new Image(this, this.game.renderer.width/9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
-        this.arrowLeft.flipX = true;
-        this.add.existing(this.arrowLeft);
-        this.mobileTapLEFT = this.add
-          .rectangle(
-            this.game.renderer.width/9,
-            this.game.renderer.height/2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorHorizontally(-1);
-          });
-
-        this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 2, 32, 33)
+        this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
         this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
         this.add.existing(this.Rectangle);
-        this.mobileTapENTER = this.add
-          .rectangle(
-            this.cameras.main.worldView.x + this.cameras.main.width / 2,
-            this.cameras.main.worldView.y + this.cameras.main.height / 2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-              const layers: string[] = [];
-              let i = 0;
-              for (const layerItem of this.selectedLayers) {
-                  if (layerItem !== undefined) {
-                      layers.push(this.layers[i][layerItem].name);
-                  }
-                  i++;
-              }
-
-              gameManager.setCharacterLayers(layers);
-
-              this.scene.sleep(CustomizeSceneName);
-              gameManager.tryResumingGame(this, EnableCameraSceneName);
-          });
-
-        this.arrowDown = new Image(this, this.game.renderer.width - 30, 100, CustomizeTextures.arrowUp);
-        this.arrowDown.flipY = true;
-        this.add.existing(this.arrowDown);
-        this.mobileTapDOWN = this.add
-          .rectangle(
-            this.game.renderer.width - 30,
-            100,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorVertically(1);
-          });
-
-        this.arrowUp = new Image(this, this.game.renderer.width - 30, 60, CustomizeTextures.arrowUp);
-        this.add.existing(this.arrowUp);
-        this.mobileTapUP = this.add
-          .rectangle(
-            this.game.renderer.width - 30,
-            60,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorVertically(-1);
-          });
 
         this.createCustomizeLayer(0, 0, 0);
         this.createCustomizeLayer(0, 0, 1);
@@ -177,22 +93,10 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.moveLayers();
         this.input.keyboard.on('keyup-ENTER', () => {
-            const layers: string[] = [];
-            let i = 0;
-            for (const layerItem of this.selectedLayers) {
-                if (layerItem !== undefined) {
-                    layers.push(this.layers[i][layerItem].name);
-                }
-                i++;
-            }
-            if (!areCharacterLayersValid(layers)) {
-                return;
-            }
-
-            gameManager.setCharacterLayers(layers);
-
-            this.scene.sleep(CustomizeSceneName);
-            gameManager.tryResumingGame(this, EnableCameraSceneName);
+            this.nextSceneToCamera();
+        });
+        this.input.keyboard.on('keyup-BACKSPACE', () => {
+            this.backToPreviousScene();
         });
 
         this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1));
@@ -222,6 +126,27 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     private moveCursorVertically(index:number): void {
+
+        if(index === -1 && this.activeRow === 5){
+            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
+            button.innerHTML = `Next <img src="resources/objects/arrow_up.png"/>`;
+        }
+
+        if(index === 1 && this.activeRow === 4){
+            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
+            button.innerText = 'Finish';
+        }
+
+        if(index === -1 && this.activeRow === 1){
+            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
+            button.innerText = `Back`;
+        }
+
+        if(index === 1 && this.activeRow === 0){
+            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
+            button.innerHTML = `Back <img src="resources/objects/arrow_up.png"/>`;
+        }
+
         this.activeRow += index;
         if (this.activeRow < 0) {
             this.activeRow = 0
@@ -236,11 +161,6 @@ export class CustomizeScene extends AbstractCharacterScene {
         localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
     }
 
-    update(time: number, delta: number): void {
-        super.update(time, delta);
-        this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
-
     /**
      * @param x, the layer's vertical position
      * @param y, the layer's horizontal position
@@ -298,7 +218,7 @@ export class CustomizeScene extends AbstractCharacterScene {
      */
     private moveLayers(): void {
         const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 2;
+        const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 3;
         const screenWidth = this.game.renderer.width;
         const screenHeight = this.game.renderer.height;
         for (let i = 0; i < this.containersRow.length; i++) {
@@ -337,39 +257,63 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
      }
 
+     update(time: number, delta: number): void {
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.customizeSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
      public onResize(): void {
         this.moveLayers();
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        this.mobileTapENTER.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
-        this.mobileTapENTER.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
-
-        this.textField.x = this.game.renderer.width/2;
-
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
-
-        this.arrowUp.x = this.game.renderer.width - 30;
-        this.mobileTapUP.x = this.game.renderer.width - 30;
-        this.arrowUp.y = 60;
-        this.mobileTapUP.y = 60;
-
-        this.arrowDown.x = this.game.renderer.width - 30;
-        this.mobileTapDOWN.x = this.game.renderer.width - 30;
-        this.arrowDown.y = 100;
-        this.mobileTapDOWN.y = 100;
-
-        this.arrowLeft.x = this.game.renderer.width/9;
-        this.mobileTapLEFT.x = this.game.renderer.width/9;
-        this.arrowLeft.y = this.game.renderer.height/2;
-        this.mobileTapLEFT.y = this.game.renderer.height/2;
-
-        this.arrowRight.x = this.game.renderer.width*0.9;
-        this.mobileTapRIGHT.x = this.game.renderer.width*0.9;
-        this.arrowRight.y = this.game.renderer.height/2;
-        this.mobileTapRIGHT.y = this.game.renderer.height/2;
-
+        this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
 
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.customizeSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
      }
+
+     protected getMiddleX() : number{
+        return (this.game.renderer.width / 2) -  
+        (
+            this.customizeSceneElement
+            && this.customizeSceneElement.node
+            && this.customizeSceneElement.node.getBoundingClientRect().width > 0
+            ? (this.customizeSceneElement.node.getBoundingClientRect().width / 4)
+            : 150
+        );
+    }
+
+    private nextSceneToCamera(){
+        const layers: string[] = [];
+            let i = 0;
+            for (const layerItem of this.selectedLayers) {
+                if (layerItem !== undefined) {
+                    layers.push(this.layers[i][layerItem].name);
+                }
+                i++;
+            }
+            if (!areCharacterLayersValid(layers)) {
+                return;
+            }
+
+            gameManager.setCharacterLayers(layers);
+            this.scene.sleep(CustomizeSceneName);
+            this.scene.remove(SelectCharacterSceneName);
+            gameManager.tryResumingGame(this, EnableCameraSceneName);
+    }
+
+    private backToPreviousScene(){
+        this.scene.sleep(CustomizeSceneName);
+        this.scene.run(SelectCharacterSceneName);
+    }
 }
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 6a91fc34..deafe15f 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -9,6 +9,8 @@ import {SoundMeterSprite} from "../Components/SoundMeterSprite";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
+import Zone = Phaser.GameObjects.Zone;
+import { MenuScene } from "../Menu/MenuScene";
 
 export const EnableCameraSceneName = "EnableCameraScene";
 enum LoginTextures {
@@ -19,12 +21,11 @@ enum LoginTextures {
     arrowUp = "arrow_up"
 }
 
+const enableCameraSceneKey = 'enableCameraScene';
 
 export class EnableCameraScene extends Phaser.Scene {
     private textField!: TextField;
-    private pressReturnField!: TextField;
     private cameraNameField!: TextField;
-    private logo!: Image;
     private arrowLeft!: Image;
     private arrowRight!: Image;
     private arrowDown!: Image;
@@ -38,7 +39,9 @@ export class EnableCameraScene extends Phaser.Scene {
     private microphoneNameField!: TextField;
     private repositionCallback!: (this: Window, ev: UIEvent) => void;
 
-    private mobileTapRectangle!: Rectangle;
+    private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
+
+    private mobileTapZone!: Zone;
     constructor() {
         super({
             key: EnableCameraSceneName
@@ -47,8 +50,10 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     preload() {
+
+        this.load.html(enableCameraSceneKey, 'resources/html/EnableCameraScene.html');
+
         this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
         this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png");
         this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
@@ -56,23 +61,27 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     create() {
+
+        const middleX = this.getMiddleX();
+        this.enableCameraSceneElement = this.add.dom(middleX, 0).createFromCache(enableCameraSceneKey);
+        MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey);
+
+        const continuingButton = this.enableCameraSceneElement.getChildByID('enableCameraSceneFormSubmit') as HTMLButtonElement;
+        continuingButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.login();
+        });
+
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
         
-        this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
+        /* FIX ME */
+        this.textField = new TextField(this, this.game.renderer.width / 2, 20, '');
 
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start');
         // For mobile purposes - we need a big enough touchable area.
-        this.mobileTapRectangle = this.add
-          .rectangle(
-            this.game.renderer.width / 2,
-            this.game.renderer.height - 30,
-            200,
-            50,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
+        this.mobileTapZone = this.add.zone(this.game.renderer.width / 2,this.game.renderer.height - 30,200,50)
+          .setInteractive().on("pointerdown", () => {
             this.login();
           });
 
@@ -102,9 +111,6 @@ export class EnableCameraScene extends Phaser.Scene {
         this.arrowDown.setInteractive().on('pointerdown', this.nextMic.bind(this));
         this.add.existing(this.arrowDown);
 
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
         this.input.keyboard.on('keyup-ENTER', () => {
             this.login();
         });
@@ -215,11 +221,9 @@ export class EnableCameraScene extends Phaser.Scene {
         }
 
         this.textField.x = this.game.renderer.width / 2;
-        this.mobileTapRectangle.x = this.game.renderer.width / 2;
+        this.mobileTapZone.x = this.game.renderer.width / 2;
         this.cameraNameField.x = this.game.renderer.width / 2;
         this.microphoneNameField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
 
         this.cameraNameField.y = bounds.top / RESOLUTION - 8;
 
@@ -239,18 +243,20 @@ export class EnableCameraScene extends Phaser.Scene {
 
         this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
         this.arrowUp.y = this.microphoneNameField.y;
-
-        this.pressReturnField.y = Math.max(this.game.renderer.height - 30, this.microphoneNameField.y + 20);
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = Math.max(this.game.renderer.height - 20, this.microphoneNameField.y + 30);
     }
 
     update(time: number, delta: number): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-
         this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
 
         mediaManager.setLastUpdateScene();
+
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.enableCameraSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
     private login(): void {
@@ -276,4 +282,15 @@ export class EnableCameraScene extends Phaser.Scene {
         }
         this.updateWebCamName();
     }
+
+    private getMiddleX() : number{
+        return (this.game.renderer.width / 2) -
+        (
+            this.enableCameraSceneElement
+            && this.enableCameraSceneElement.node
+            && this.enableCameraSceneElement.node.getBoundingClientRect().width > 0
+            ? (this.enableCameraSceneElement.node.getBoundingClientRect().width / 4)
+            : (300 / 2)
+        );
+    }
 }
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 057cb6ae..95f620b7 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -1,30 +1,18 @@
 import {gameManager} from "../Game/GameManager";
-import {TextField} from "../Components/TextField";
-import {TextInput} from "../Components/TextInput";
-import Image = Phaser.GameObjects.Image;
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
-import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser";
 import { localUserStore } from "../../Connexion/LocalUserStore";
-import Rectangle = Phaser.GameObjects.Rectangle;
-import {touchScreenManager} from "../../Touch/TouchScreenManager";
-import {PinchManager} from "../UserInput/PinchManager";
+import {MenuScene} from "../Menu/MenuScene";
+import { isUserNameValid } from "../../Connexion/LocalUser";
 
-//todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
-enum LoginTextures {
-    icon = "icon",
-    mainFont = "main_font"
-}
+
+const loginSceneKey = 'loginScene';
 
 export class LoginScene extends ResizableScene {
-    private nameInput!: TextInput;
-    private textField!: TextField;
-    private infoTextField!: TextField;
-    private pressReturnField!: TextField;
-    private logo!: Image;
+
+    private loginSceneElement!: Phaser.GameObjects.DOMElement;
     private name: string = '';
-    private mobileTapRectangle!: Rectangle;
 
     constructor() {
         super({
@@ -34,81 +22,82 @@ export class LoginScene extends ResizableScene {
     }
 
     preload() {
-        //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
-        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
+        this.load.html(loginSceneKey, 'resources/html/loginScene.html');
     }
 
     create() {
-        if (touchScreenManager.supportTouchScreen) {
-            new PinchManager(this);
-        }
+        const middleX = this.getMiddleX();
+        this.loginSceneElement = this.add.dom((middleX/2), 0).createFromCache(loginSceneKey);
+        MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
 
-        this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => {
-            this.name = text;
-            localUserStore.setName(text);
-        })
-            .setInteractive()
-            .on('pointerdown', () => {
-                this.nameInput.focus();
-            })
-
-        this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:')
-            .setInteractive()
-            .on('pointerdown', () => {
-                this.nameInput.focus();
-            })
-        // For mobile purposes - we need a big enough touchable area.
-        this.mobileTapRectangle = this.add.rectangle(
-            this.game.renderer.width / 2,
-            130,
-            this.game.renderer.width / 2,
-            60,
-        ).setInteractive()
-        .on('pointerdown', () => {
-            this.login(this.name)
-        })
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Touch here\n\n or \n\nPress enter to start')
-
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
-        const infoText = "Commands: \n - Arrows or W, A, S, D to move\n - SHIFT to run";
-        this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false);
-
-        this.input.keyboard.on('keyup-ENTER', () => {
-            if (isUserNameValid(this.name)) {
-                this.login(this.name);
+        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
+        const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement;
+        inputElement.value = localUserStore.getName() ?? '';
+        inputElement.focus();
+        inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
+            if(inputElement.value.length > 7){
+                event.preventDefault();
+                return;
             }
+            pErrorElement.innerHTML = '';
+            if(inputElement.value && !isUserNameValid(inputElement.value)){
+                pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.login(inputElement);
+                return;
+            }
+        });
+
+        const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement;
+        continuingButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.login(inputElement);
         });
     }
 
-    update(time: number, delta: number): void {
-        if (this.name == '') {
-            this.pressReturnField?.setVisible(false);
-        } else {
-            this.pressReturnField?.setVisible(!!(Math.floor(time / 500) % 2));
+    private login(inputElement: HTMLInputElement): void {
+        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
+        this.name = inputElement.value;
+        if (this.name === '') {
+            pErrorElement.innerHTML = 'The name is empty';
+            return
+        }
+        if(!isUserNameValid(this.name)){
+            pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
+            return
         }
-    }
-
-    private login(name: string): void {
         if (this.name === '') return
-        gameManager.setPlayerName(name);
+        gameManager.setPlayerName(this.name);
 
         this.scene.stop(LoginSceneName)
         gameManager.tryResumingGame(this, SelectCharacterSceneName);
         this.scene.remove(LoginSceneName)
     }
 
-    public onResize(ev: UIEvent): void {
-        this.textField.x = this.game.renderer.width / 2;
-        this.nameInput.setX(this.game.renderer.width / 2 - 64);
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.mobileTapRectangle.x = this.game.renderer.width / 2;
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
-        this.infoTextField.y = this.game.renderer.height - 35;
+    update(time: number, delta: number): void {
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.loginSceneElement,
+            x: (middleX/2),
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
+    public onResize(ev: UIEvent): void {
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.loginSceneElement,
+            x: (middleX/2),
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    private getMiddleX() : number{
+        const middleX = ((window.innerWidth) - ((this.loginSceneElement && this.loginSceneElement.width > 0 ? this.loginSceneElement.width : 200 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
+        return (middleX > 0 ? middleX : 0);
+    }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
new file mode 100644
index 00000000..5d874f46
--- /dev/null
+++ b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
@@ -0,0 +1,77 @@
+import {gameManager} from "../Game/GameManager";
+import {TextField} from "../Components/TextField";
+import Image = Phaser.GameObjects.Image;
+import Rectangle = Phaser.GameObjects.Rectangle;
+import {EnableCameraSceneName} from "./EnableCameraScene";
+import {CustomizeSceneName} from "./CustomizeScene";
+import {localUserStore} from "../../Connexion/LocalUserStore";
+import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
+import {addLoader} from "../Components/Loader";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
+import {AbstractCharacterScene} from "./AbstractCharacterScene";
+import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
+import {MenuScene} from "../Menu/MenuScene";
+import { SelectCharacterScene, SelectCharacterSceneName } from "./SelectCharacterScene";
+
+export class SelectCharacterMobileScene extends SelectCharacterScene {
+
+    create(){
+        super.create();
+        this.selectedRectangle.destroy();
+    }
+    
+    protected defineSetupPlayer(numero: number){
+        const deltaX = 30;
+        const deltaY = 2;
+        let [playerX, playerY] = this.getCharacterPosition();
+        let playerVisible = true;
+        let playerScale = 1.5;
+        let playserOpactity = 1;
+
+        if( this.currentSelectUser !== numero ){
+            playerVisible = false;
+        }
+        if( numero === (this.currentSelectUser + 1) ){
+            playerY -= deltaY;
+            playerX += deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser + 2) ){
+            playerY -= deltaY;
+            playerX += (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 1) ){
+            playerY -= deltaY;
+            playerX -= deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 2) ){
+            playerY -= deltaY;
+            playerX -= (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+    }
+
+        /**
+     * Returns pixel position by on column and row number
+     */
+         protected getCharacterPosition(): [number, number] {
+            return [
+                this.game.renderer.width / 2,
+                this.game.renderer.height / 3
+            ];
+        }
+
+}
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 3c8d0281..c9f41e69 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -1,5 +1,4 @@
 import {gameManager} from "../Game/GameManager";
-import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {EnableCameraSceneName} from "./EnableCameraScene";
@@ -12,268 +11,265 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
-
+import {MenuScene} from "../Menu/MenuScene";
+import { SelectCharacterMobileScene } from "./SelectCharacterMobileScene";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
-enum LoginTextures {
-    playButton = "play_button",
-    icon = "icon",
-    mainFont = "main_font",
-    customizeButton = "customize_button",
-    customizeButtonSelected = "customize_button_selected"
-}
+
+const selectCharacterKey = 'selectCharacterScene';
 
 export class SelectCharacterScene extends AbstractCharacterScene {
-    private readonly nbCharactersPerRow = 6;
-    private textField!: TextField;
-    private pressReturnField!: TextField;
-    private logo!: Image;
-    private customizeButton!: Image;
-    private customizeButtonSelected!: Image;
+    protected readonly nbCharactersPerRow = 6;
+    protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
+    protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
+    protected playerModels!: BodyResourceDescriptionInterface[];
 
-    private selectedRectangle!: Rectangle;
-    private selectedRectangleXPos = 0; // Number of the character selected in the rows
-    private selectedRectangleYPos = 0; // Number of the character selected in the columns
-    private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
-    private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
-    private mobileTapRectangle!: Rectangle;
-    private playerModels!: BodyResourceDescriptionInterface[];
+    protected selectedRectangle!: Rectangle;
+
+    protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
+    protected currentSelectUser = 0;
 
     constructor() {
         super({
-            key: SelectCharacterSceneName
+            key: SelectCharacterSceneName,
         });
     }
 
     preload() {
         addLoader(this);
 
+        this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
+
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 this.playerModels.push(bodyResourceDescription);
             });
         })
-
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
-        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
         this.playerModels = loadAllDefaultModels(this.load);
-        this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
-        this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
-
         addLoader(this);
     }
 
     create() {
+
+        const middleX = this.getMiddleX();
+        this.selectCharacterSceneElement = this.add.dom(middleX, 0).createFromCache(selectCharacterKey);
+        MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
+
+        this.selectCharacterSceneElement.addListener('click');
+        this.selectCharacterSceneElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
+                this.moveToLeft();
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
+                this.moveToRight();
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormSubmit') {
+                this.nextSceneToCameraScene();
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormCustomYourOwnSubmit') {
+                this.nextSceneToCustomizeScene();
+            }
+        });
+
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
-        this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
-        this.pressReturnField = new TextField(
-            this,
-            this.game.renderer.width / 2,
-            90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60,
-            'Touch here\n\n or \n\nPress enter to start');
-        // For mobile purposes - we need a big enough touchable area.
-        this.mobileTapRectangle = this.add
-          .rectangle(
-            this.game.renderer.width / 2,
-            275,
-            this.game.renderer.width / 2,
-            50,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.nextScene();
-          });
 
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
-
         this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
-
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
-        this.input.keyboard.on('keyup-ENTER', () => {
-            return this.nextScene();
-        });
-
-        this.input.keyboard.on('keydown-RIGHT', () => {
-            if(this.selectedRectangleYPos * this.nbCharactersPerRow + (this.selectedRectangleXPos + 2))
-            if (
-                this.selectedRectangleXPos < this.nbCharactersPerRow - 1
-                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos + 1) + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleXPos++;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-LEFT', () => {
-            if (
-                this.selectedRectangleXPos > 0
-                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos - 1) + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleXPos--;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-DOWN', () => {
-            if (
-                this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)
-                && (
-                    (((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length // check if player isn't empty
-                    || (this.selectedRectangleYPos + 1) === Math.ceil(this.playerModels.length / this.nbCharactersPerRow) // check if is custom rectangle
-                )
-            ) {
-                this.selectedRectangleYPos++;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-UP', () => {
-            if (
-                this.selectedRectangleYPos > 0
-                && (((this.selectedRectangleYPos - 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleYPos--;
-            }
-            this.updateSelectedPlayer();
-        });
+        this.selectedRectangle.setDepth(2);
 
         /*create user*/
         this.createCurrentPlayer();
-
         const playerNumber = localUserStore.getPlayerCharacterIndex();
-        if (playerNumber && playerNumber !== -1) {
-            this.selectedRectangleXPos = playerNumber % this.nbCharactersPerRow;
-            this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow);
-            this.updateSelectedPlayer();
-        } else if (playerNumber === -1) {
-            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
-            this.updateSelectedPlayer();
-        }
+
+        this.input.keyboard.on('keyup-ENTER', () => {
+            return this.nextSceneToCameraScene();
+        });
+
+        this.input.keyboard.on('keydown-RIGHT', () => {
+            this.moveToRight();
+        });
+        this.input.keyboard.on('keydown-LEFT', () => {
+            this.moveToLeft();
+        });
+        this.input.keyboard.on('keydown-UP', () => {
+            this.moveToUp();
+        });
+        this.input.keyboard.on('keydown-DOWN', () => {
+            this.moveToDown();
+        });
     }
 
-    update(time: number, delta: number): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
-
-    private nextScene(): void {
+    protected nextSceneToCameraScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
-        this.scene.stop(SelectCharacterSceneName);
-        if (this.selectedPlayer !== null) {
-            gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
-            gameManager.tryResumingGame(this, EnableCameraSceneName);
-        } else {
-            this.scene.run(CustomizeSceneName);
+        if(!this.selectedPlayer){
+            return;
         }
+        this.scene.stop(SelectCharacterSceneName);
+        gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
+        gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCharacterSceneName);
     }
 
+    protected nextSceneToCustomizeScene(): void {
+        if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
+            return;
+        }
+        this.scene.sleep(SelectCharacterSceneName);
+        this.scene.run(CustomizeSceneName);
+    }
+
     createCurrentPlayer(): void {
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
-            const col = i % this.nbCharactersPerRow;
-            const row = Math.floor(i / this.nbCharactersPerRow);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-            const player = this.physics.add.sprite(x, y, playerResource.name, 0);
-            player.setBounce(0.2);
-            player.setCollideWorldBounds(true);
+            const [middleX, middleY] = this.getCharacterPosition();
+            const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
+            this.setUpPlayer(player, i);
             this.anims.create({
                 key: playerResource.name,
-                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}),
-                frameRate: 10,
+                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}),
+                frameRate: 8,
                 repeat: -1
             });
             player.setInteractive().on("pointerdown", () => {
-                this.selectedRectangleXPos = col;
-                this.selectedRectangleYPos = row;
-                this.updateSelectedPlayer();
+                if(this.currentSelectUser === i){
+                    return;
+                }
+                this.currentSelectUser = i;
+                this.moveUser();
             });
             this.players.push(player);
         }
 
-        const maxRow = Math.ceil( this.playerModels.length / this.nbCharactersPerRow);
-        this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButton);
-        this.customizeButton.setOrigin(0.5, 0.5);
-        this.add.existing(this.customizeButton);
-        this.customizeButtonSelected = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButtonSelected);
-        this.customizeButtonSelected.setOrigin(0.5, 0.5);
-        this.customizeButtonSelected.setVisible(false);
-        this.add.existing(this.customizeButtonSelected);
+        this.selectedPlayer = this.players[this.currentSelectUser];
+        this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
+    }
 
-        this.customizeButton.setInteractive().on("pointerdown", () => {
-            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
-            this.updateSelectedPlayer();
-            this.nextScene();
-        });
-        this.customizeButtonSelected.setInteractive().on("pointerdown", () => {
-            this.nextScene();
-        });
+    protected moveUser(){
+        for(let i = 0; i < this.players.length; i++){
+            const player = this.players[i];
+            this.setUpPlayer(player, i);
+        }
+        this.updateSelectedPlayer();
+    }
 
-        this.selectedPlayer = this.players[0];
-        this.selectedPlayer.play(this.playerModels[0].name);
+    protected moveToLeft(){
+        if(this.currentSelectUser === 0){
+            return;
+        }
+        this.currentSelectUser -= 1;
+        this.moveUser();
+    }
+
+    protected moveToRight(){
+        if(this.currentSelectUser === (this.players.length - 1)){
+            return;
+        }
+        this.currentSelectUser += 1;
+        this.moveUser();
+    }
+
+    protected moveToUp(){
+        if(this.currentSelectUser < this.nbCharactersPerRow){
+            return;
+        }
+        this.currentSelectUser -= this.nbCharactersPerRow;
+        this.moveUser();
+    }
+
+    protected moveToDown(){
+        if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){
+            return;
+        }
+        this.currentSelectUser += this.nbCharactersPerRow;
+        this.moveUser();
+    }
+
+    protected defineSetupPlayer(numero: number){
+        const deltaX = 32;
+        const deltaY = 32;
+        let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
+
+        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
+        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
+
+        const playerVisible = true;
+        const playerScale = 1;
+        const playserOpactity = 1;
+
+        // if selected
+        if( numero === this.currentSelectUser ){
+            this.selectedRectangle.setX(playerX);
+            this.selectedRectangle.setY(playerY);
+        }
+
+        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+    }
+
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
+
+        const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
+        player.setBounce(0.2);
+        player.setCollideWorldBounds(true);
+        player.setVisible( playerVisible );
+        player.setScale(playerScale, playerScale);
+        player.setAlpha(playserOpactity);
+        player.setX(playerX);
+        player.setY(playerY);
     }
 
     /**
      * Returns pixel position by on column and row number
      */
-    private getCharacterPosition(x: number, y: number): [number, number] {
+    protected getCharacterPosition(): [number, number] {
         return [
-            this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32,
-            y * 32 + 90
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 2.5
         ];
     }
 
-    private updateSelectedPlayer(): void {
-        this.selectedPlayer?.anims.pause();
-        // If we selected the customize button
-        if (this.selectedRectangleYPos === Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
-            this.selectedPlayer = null;
-            this.selectedRectangle.setVisible(false);
-            this.customizeButtonSelected.setVisible(true);
-            this.customizeButton.setVisible(false);
-            localUserStore.setPlayerCharacterIndex(-1);
-            return;
-        }
-        this.customizeButtonSelected.setVisible(false);
-        this.customizeButton.setVisible(true);
-        const [x, y] = this.getCharacterPosition(this.selectedRectangleXPos, this.selectedRectangleYPos);
-        this.selectedRectangle.setVisible(true);
-        this.selectedRectangle.setX(x);
-        this.selectedRectangle.setY(y);
-        this.selectedRectangle.setSize(32, 32);
-        const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
-        const player = this.players[playerNumber];
-        player.play(this.playerModels[playerNumber].name);
+    protected updateSelectedPlayer(): void {
+        this.selectedPlayer?.anims.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
+        const player = this.players[this.currentSelectUser];
+        player.play(this.playerModels[this.currentSelectUser].name);
         this.selectedPlayer = player;
-        localUserStore.setPlayerCharacterIndex(playerNumber);
+        localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
+    }
+
+    update(time: number, delta: number): void {
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.selectCharacterSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
     public onResize(ev: UIEvent): void {
-        this.textField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
-        this.customizeButton.x = this.game.renderer.width / 2;
-        this.customizeButtonSelected.x = this.game.renderer.width / 2;
+        //move position of user
+        this.moveUser();
 
-        for (let i = 0; i <this.playerModels.length; i++) {
-            const player = this.players[i];
-
-            const col = i % this.nbCharactersPerRow;
-            const row = Math.floor(i / this.nbCharactersPerRow);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-            player.x = x;
-            player.y = y;
-        }
-        this.updateSelectedPlayer();
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.selectCharacterSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
+    protected getMiddleX() : number{
+        return (this.game.renderer.width / 2) -
+        (
+            this.selectCharacterSceneElement
+            && this.selectCharacterSceneElement.node
+            && this.selectCharacterSceneElement.node.getBoundingClientRect().width > 0
+            ? (this.selectCharacterSceneElement.node.getBoundingClientRect().width / 4)
+            : 150
+        );
+    }
 }
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index aeacd0c2..e1ce32de 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -3,35 +3,25 @@ import Rectangle = Phaser.GameObjects.Rectangle;
 import { addLoader } from "../Components/Loader";
 import { gameManager} from "../Game/GameManager";
 import { ResizableScene } from "./ResizableScene";
-import { TextField } from "../Components/TextField";
 import { EnableCameraSceneName } from "./EnableCameraScene";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures";
 import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
+import { MenuScene } from "../Menu/MenuScene";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
-enum LoginTextures {
-    playButton = "play_button",
-    icon = "icon",
-    mainFont = "main_font"
-}
+const selectCompanionSceneKey = 'selectCompanionScene';
 
 export class SelectCompanionScene extends ResizableScene {
-    private logo!: Image;
-    private textField!: TextField;
-    private pressReturnField!: TextField;
-    private readonly nbCharactersPerRow = 7;
-
-    private selectedRectangle!: Rectangle;
-    
     private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
     private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
-    private companionModels: Array<CompanionResourceDescriptionInterface|null> = [null];
+    private companionModels: Array<CompanionResourceDescriptionInterface> = [];
 
-    private confirmTouchArea!: Rectangle;
+    private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
+    private currentCompanion = 0;
 
     constructor() {
         super({
@@ -42,208 +32,221 @@ export class SelectCompanionScene extends ResizableScene {
     preload() {
         addLoader(this);
 
+        this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
+
         getAllCompanionResources(this.load).forEach(model => {
             this.companionModels.push(model);
         });
 
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-
-        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
-
         addLoader(this);
     }
 
     create() {
+
+        const middleX = this.getMiddleX();
+        this.selectCompanionSceneElement = this.add.dom(middleX, 0).createFromCache(selectCompanionSceneKey);
+        MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
+
+        this.selectCompanionSceneElement.addListener('click');
+        this.selectCompanionSceneElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
+                this.moveToLeft();
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
+                this.moveToRight();
+            }else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormSubmit') {
+                this.nextScene();
+            }else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormBack') {
+                this._nextScene();
+            }
+        });
+
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
-        
-        this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your companion');
-
-        const confirmTouchAreaY = 115 + 32 * Math.ceil(this.companionModels.length / this.nbCharactersPerRow);
-        this.pressReturnField = new TextField(
-            this,
-            this.game.renderer.width / 2,
-            confirmTouchAreaY,
-            'Touch here\n\n or \n\n press enter to start'
-        );
-        this.confirmTouchArea = this.add
-            .rectangle(this.game.renderer.width / 2, confirmTouchAreaY, 200, 50)
-            .setInteractive()
-            .on("pointerdown", this.nextScene.bind(this));
-
-        const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
-        this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
-
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
 
         // input events
         this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this));
 
-        this.input.keyboard.on('keydown-RIGHT', this.selectNext.bind(this));
-        this.input.keyboard.on('keydown-LEFT', this.selectPrevious.bind(this));
-        this.input.keyboard.on('keydown-DOWN', this.jumpToNextRow.bind(this));
-        this.input.keyboard.on('keydown-UP', this.jumpToPreviousRow.bind(this));
+        this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
+        this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
+
+        if(localUserStore.getCompanion()){
+            const companionIndex = this.companionModels.findIndex((companion) => companion.name === localUserStore.getCompanion());
+            if(companionIndex > -1 || companionIndex < this.companions.length){
+                this.currentCompanion = companionIndex;
+                this.selectedCompanion = this.companions[companionIndex];
+            }
+        }
+
+        localUserStore.setCompanion(null);
+        gameManager.setCompanion(null);
 
         this.createCurrentCompanion();
-        this.selectCompanion(this.getCompanionIndex());
+        this.updateSelectedCompanion();
     }
 
     update(time: number, delta: number): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
-
-    private jumpToPreviousRow(): void {
-        const index = this.companions.indexOf(this.selectedCompanion) - this.nbCharactersPerRow;
-        if (index >= 0) {
-            this.selectCompanion(index);  
-        }
-    }
-
-    private jumpToNextRow(): void {
-        const index = this.companions.indexOf(this.selectedCompanion) + this.nbCharactersPerRow;
-        if (index < this.companions.length) {
-            this.selectCompanion(index);  
-        }
-    }
-
-    private selectPrevious(): void {
-        const index = this.companions.indexOf(this.selectedCompanion);
-        this.selectCompanion(index - 1);  
-    }
-
-    private selectNext(): void {
-        const index = this.companions.indexOf(this.selectedCompanion);
-        this.selectCompanion(index + 1);  
-    }
-
-    private selectCompanion(index?: number): void {
-        if (typeof index === 'undefined') {
-            index = this.companions.indexOf(this.selectedCompanion);
-        }
-
-        // make sure index is inside possible range
-        index = Math.min(this.companions.length - 1, Math.max(0, index));
-
-        if (this.selectedCompanion === this.companions[index]) {
-            return;
-        }
-
-        this.selectedCompanion.anims.pause();
-        this.selectedCompanion = this.companions[index];
-
-        this.redrawSelectedRectangle();
-
-        const model = this.companionModels[index];
-
-        if (model !== null) {
-            this.selectedCompanion.anims.play(model.name);
-        }
-    }
-
-    private redrawSelectedRectangle(): void {
-        this.selectedRectangle.setVisible(true);
-        this.selectedRectangle.setX(this.selectedCompanion.x);
-        this.selectedRectangle.setY(this.selectedCompanion.y);
-        this.selectedRectangle.setSize(32, 32);
-    }
-
-    private storeCompanionSelection(): string|null {
-        const index = this.companions.indexOf(this.selectedCompanion);
-        const model = this.companionModels[index];
-        const companion = model === null ? null : model.name;
-
-        localUserStore.setCompanion(companion);
-
-        return companion;
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.selectCompanionSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
     private nextScene(): void {
-        const companion = this.storeCompanionSelection();
+        localUserStore.setCompanion(this.companionModels[this.currentCompanion].name);
+        gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
 
+        this._nextScene();
+    }
+
+    private _nextScene(){
         // next scene
         this.scene.stop(SelectCompanionSceneName);
-
-        gameManager.setCompanion(companion);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
-
         this.scene.remove(SelectCompanionSceneName);
     }
 
     private createCurrentCompanion(): void {
         for (let i = 0; i < this.companionModels.length; i++) {
-            const companionResource = this.companionModels[i];
-
-            const col = i % this.nbCharactersPerRow;
-            const row = Math.floor(i / this.nbCharactersPerRow);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-
-            let name = "null";
-            if (companionResource !== null) {
-                name = companionResource.name;
-            }
-
-            const companion = this.physics.add.sprite(x, y, name, 0);
-            companion.setBounce(0.2);
-            companion.setCollideWorldBounds(true);
-
-            if (companionResource !== null) {
-                this.anims.create({
-                    key: name,
-                    frames: this.anims.generateFrameNumbers(name, {start: 0, end: 2,}),
-                    frameRate: 10,
-                    repeat: -1
-                });
-            }
+            const companionResource = this.companionModels[i]
+            const [middleX, middleY] = this.getCompanionPosition();
+            const companion = this.physics.add.sprite(middleX, middleY, companionResource.name, 0);
+            this.setUpCompanion(companion, i);
+            this.anims.create({
+                key: companionResource.name,
+                frames: this.anims.generateFrameNumbers(companionResource.name, {start: 0, end: 2,}),
+                frameRate: 10,
+                repeat: -1
+            });
 
             companion.setInteractive().on("pointerdown", () => {
-                this.selectCompanion(i);
+                this.currentCompanion = i;
+                this.updateSelectedCompanion();
             });
 
             this.companions.push(companion);
         }
-
-        this.selectedCompanion = this.companions[0];
-    }
-
-    private getCharacterPosition(x: number, y: number): [number, number] {
-        return [
-            this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32,
-            y * 32 + 90
-        ];
+        this.selectedCompanion = this.companions[this.currentCompanion];
     }
 
     public onResize(ev: UIEvent): void {
-        this.textField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
+        this.moveCompanion();
 
-        for (let i = 0; i < this.companionModels.length; i++) {
-            const companion = this.companions[i];
-
-            const col = i % this.nbCharactersPerRow;
-            const row = Math.floor(i / this.nbCharactersPerRow);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-            companion.x = x;
-            companion.y = y;
-        }
-
-        this.redrawSelectedRectangle();
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.selectCompanionSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
-    private getCompanionIndex(): number {
-        const companion = localUserStore.getCompanion();
+    private updateSelectedCompanion(): void {
+        this.selectedCompanion?.anims.pause();
+        const companion = this.companions[this.currentCompanion];
+        companion.play(this.companionModels[this.currentCompanion].name);
+        this.selectedCompanion = companion;
+    }
 
-        if (companion === null) {
-            return 0;
+    private moveCompanion(){
+        for(let i = 0; i < this.companions.length; i++){
+            const companion = this.companions[i];
+            this.setUpCompanion(companion, i);
         }
+        this.updateSelectedCompanion();
+    }
 
-        return this.companionModels.findIndex(model => model !== null && model.name === companion);
+    private moveToLeft(){
+        if(this.currentCompanion === 0){
+            return;
+        }
+        this.currentCompanion -= 1;
+        this.moveCompanion();
+    }
+
+    private moveToRight(){
+        if(this.currentCompanion === (this.companions.length - 1)){
+            return;
+        }
+        this.currentCompanion += 1;
+        this.moveCompanion();
+    }
+
+    private defineSetupCompanion(numero: number){
+        const deltaX = 30;
+        const deltaY = 2;
+        let [companionX, companionY] = this.getCompanionPosition();
+        let companionVisible = true;
+        let companionScale = 1.5;
+        let companionOpactity = 1;
+        if( this.currentCompanion !== numero ){
+            companionVisible = false;
+        }
+        if( numero === (this.currentCompanion + 1) ){
+            companionY -= deltaY;
+            companionX += deltaX;
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        if( numero === (this.currentCompanion + 2) ){
+            companionY -= deltaY;
+            companionX += (deltaX * 2);
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        if( numero === (this.currentCompanion - 1) ){
+            companionY -= deltaY;
+            companionX -= deltaX;
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        if( numero === (this.currentCompanion - 2) ){
+            companionY -= deltaY;
+            companionX -= (deltaX * 2);
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        return {companionX, companionY, companionScale, companionOpactity, companionVisible}
+    }
+
+    /**
+     * Returns pixel position by on column and row number
+     */
+    private getCompanionPosition(): [number, number] {
+        return [
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 3
+        ];
+    }
+
+    private setUpCompanion(companion: Phaser.Physics.Arcade.Sprite, numero: number){
+
+        const {companionX, companionY, companionScale, companionOpactity, companionVisible} = this.defineSetupCompanion(numero);
+        companion.setBounce(0.2);
+        companion.setCollideWorldBounds(true);
+        companion.setVisible( companionVisible );
+        companion.setScale(companionScale, companionScale);
+        companion.setAlpha(companionOpactity);
+        companion.setX(companionX);
+        companion.setY(companionY);
+    }
+
+    private getMiddleX() : number{
+        return (this.game.renderer.width / 2) -
+        (
+            this.selectCompanionSceneElement
+            && this.selectCompanionSceneElement.node
+            && this.selectCompanionSceneElement.node.getBoundingClientRect().width > 0
+            ? (this.selectCompanionSceneElement.node.getBoundingClientRect().width / 4)
+            : 150
+        );
     }
 }
diff --git a/front/src/Phaser/Map/ITiledMap.ts b/front/src/Phaser/Map/ITiledMap.ts
index 39e0a1f5..c4828911 100644
--- a/front/src/Phaser/Map/ITiledMap.ts
+++ b/front/src/Phaser/Map/ITiledMap.ts
@@ -14,7 +14,7 @@ export interface ITiledMap {
      * Map orientation (orthogonal)
      */
     orientation: string;
-    properties: ITiledMapLayerProperty[];
+    properties?: ITiledMapLayerProperty[];
 
     /**
      * Render order (right-down)
@@ -24,6 +24,11 @@ export interface ITiledMap {
     tilewidth: number;
     tilesets: ITiledTileSet[];
     version: number;
+    compressionlevel?: number;
+    infinite?: boolean;
+    nextlayerid?: number;
+    tiledversion?: string;
+    type?: string;
 }
 
 export interface ITiledMapLayerProperty {
@@ -38,19 +43,35 @@ export interface ITiledMapLayerProperty {
     value: boolean
 }*/
 
-export interface ITiledMapLayer {
+export type ITiledMapLayer = ITiledMapGroupLayer | ITiledMapObjectLayer | ITiledMapTileLayer;
+
+export interface ITiledMapGroupLayer {
+    id?: number,
+    name: string;
+    opacity: number;
+    properties?: ITiledMapLayerProperty[];
+
+    type: "group";
+    visible: boolean;
+    x: number;
+    y: number;
+    /**
+     * Layers for group layer
+     */
+    layers: ITiledMapLayer[];
+}
+
+export interface ITiledMapTileLayer {
+    id?: number,
     data: number[]|string;
     height: number;
     name: string;
     opacity: number;
-    properties: ITiledMapLayerProperty[];
-    encoding: string;
+    properties?: ITiledMapLayerProperty[];
+    encoding?: string;
     compression?: string;
 
-    /**
-     * Type of layer (tilelayer, objectgroup)
-     */
-    type: string;
+    type: "tilelayer";
     visible: boolean;
     width: number;
     x: number;
@@ -59,7 +80,28 @@ export interface ITiledMapLayer {
     /**
      * Draw order (topdown (default), index)
      */
-    draworder: string;
+    draworder?: string;
+}
+
+export interface ITiledMapObjectLayer {
+    id?: number,
+    height: number;
+    name: string;
+    opacity: number;
+    properties?: ITiledMapLayerProperty[];
+    encoding?: string;
+    compression?: string;
+
+    type: "objectgroup";
+    visible: boolean;
+    width: number;
+    x: number;
+    y: number;
+
+    /**
+     * Draw order (topdown (default), index)
+     */
+    draworder?: string;
     objects: ITiledMapObject[];
 }
 
@@ -94,6 +136,20 @@ export interface ITiledMapObject {
      * Polyline points
      */
     polyline: {x: number, y: number}[];
+
+    text?: ITiledText
+}
+
+export interface ITiledText {
+    text: string,
+    wrap?: boolean,
+    fontfamily?: string,
+    pixelsize?: number,
+    color?: string,
+    underline?: boolean,
+    italic?: boolean,
+    strikeout?: boolean,
+    halign?: "center"|"right"|"justify"|"left"
 }
 
 export interface ITiledTileSet {
diff --git a/front/src/Phaser/Map/LayersIterator.ts b/front/src/Phaser/Map/LayersIterator.ts
new file mode 100644
index 00000000..501a5f7b
--- /dev/null
+++ b/front/src/Phaser/Map/LayersIterator.ts
@@ -0,0 +1,44 @@
+import {ITiledMap, ITiledMapLayer} from "./ITiledMap";
+
+/**
+ * Iterates over the layers of a map, flattening the grouped layers
+ */
+export class LayersIterator implements IterableIterator<ITiledMapLayer> {
+
+    private layers: ITiledMapLayer[] = [];
+    private pointer: number = 0;
+
+    constructor(private map: ITiledMap) {
+        this.initLayersList(map.layers, '');
+    }
+
+    private initLayersList(layers : ITiledMapLayer[], prefix : string) {
+        for (const layer of layers) {
+            if (layer.type === 'group') {
+                this.initLayersList(layer.layers, prefix + layer.name + '/');
+            } else {
+                const layerWithNewName = { ...layer };
+                layerWithNewName.name = prefix+layerWithNewName.name;
+                this.layers.push(layerWithNewName);
+            }
+        }
+    }
+
+    public next(): IteratorResult<ITiledMapLayer> {
+        if (this.pointer < this.layers.length) {
+            return {
+                done: false,
+                value: this.layers[this.pointer++]
+            }
+        } else {
+            return {
+                done: true,
+                value: null
+            }
+        }
+    }
+
+    [Symbol.iterator](): IterableIterator<ITiledMapLayer> {
+        return new LayersIterator(this.map);
+    }
+}
diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
index 6a5db25a..dce4e23a 100644
--- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
@@ -25,7 +25,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     private createHelpCameraSettings() : void {
-        const middleX = (window.innerWidth / 3) - (370*0.85);
+        const middleX = this.getMiddleX();
         this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
         this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
         this.helpCameraSettingsElement.addListener('click');
@@ -46,19 +46,13 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     private openHelpCameraSettingsOpened(): void{
         HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
         this.helpCameraSettingsOpened = true;
-        let middleY = (window.innerHeight / 3) - (495);
-        if(middleY < 0){
-            middleY = 0;
-        }
-        let middleX =  (window.innerWidth / 3) - (370*0.85);
-        if(middleX < 0){
-            middleX = 0;
-        }
         if(window.navigator.userAgent.includes('Firefox')){
             HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
         }else if(window.navigator.userAgent.includes('Chrome')){
             HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
         }
+        const middleY = this.getMiddleY();
+        const middleX = this.getMiddleX();
         this.tweens.add({
             targets: this.helpCameraSettingsElement,
             y: middleY,
@@ -70,6 +64,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     private closeHelpCameraSettingsOpened(): void{
+        const middleX = this.getMiddleX();
         const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
         helpCameraSettingsInfo.innerText = '';
         helpCameraSettingsInfo.style.display = 'none';
@@ -77,6 +72,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
         this.tweens.add({
             targets: this.helpCameraSettingsElement,
             y: -400,
+            x: middleX,
             duration: 1000,
             ease: 'Power3',
             overflow: 'scroll'
@@ -91,5 +87,49 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
         }, 250);
     }
 
+    update(time: number, delta: number): void {
+        const middleX = this.getMiddleX();
+        const middleY = this.getMiddleY();
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            x: middleX,
+            y: middleY,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    public onResize(ev: UIEvent): void {
+        const middleX = this.getMiddleX();
+        const middleY = this.getMiddleY();
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            x: middleX,
+            y: middleY,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    private getMiddleX() : number{
+        return (this.game.renderer.width / 2) -  
+        (
+            this.helpCameraSettingsElement
+            && this.helpCameraSettingsElement.node
+            && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
+            ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / 4)
+            : (400 / 2)
+        );
+    }
+
+    private getMiddleY() : number{
+        const middleY = ((window.innerHeight) - (
+            (this.helpCameraSettingsElement
+            && this.helpCameraSettingsElement.node
+            && this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
+                ? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
+        return (middleY > 0 ? middleY / 2 : 0);
+    }
+
 }
 
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index 187f98c1..05cea305 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@@ -16,7 +16,7 @@ const gameMenuIconKey = 'gameMenuIcon';
 const gameSettingsMenuKey = 'gameSettingsMenu';
 const gameShare = 'gameShare';
 
-const closedSideMenuX = -200;
+const closedSideMenuX = -1000;
 const openedSideMenuX = 0;
 
 /**
@@ -91,7 +91,7 @@ export class MenuScene extends Phaser.Scene {
 
         this.menuElement.addListener('click');
         this.menuElement.on('click', this.onMenuClick.bind(this));
-        
+
         worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
     }
 
@@ -118,7 +118,8 @@ export class MenuScene extends Phaser.Scene {
         this.closeAll();
         this.sideMenuOpened = true;
         this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
-        if (gameManager.getCurrentGameScene(this).connection && gameManager.getCurrentGameScene(this).connection.isAdmin()) {
+        const connection = gameManager.getCurrentGameScene(this).connection;
+        if (connection && connection.isAdmin()) {
             const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement;
             adminSection.hidden = false;
         }
@@ -134,7 +135,7 @@ export class MenuScene extends Phaser.Scene {
             ease: 'Power3'
         });
     }
-    
+
     private showWorldCapacityWarning() {
         if (!this.warningContainer) {
             this.warningContainer = new WarningContainer(this);
@@ -147,7 +148,7 @@ export class MenuScene extends Phaser.Scene {
             this.warningContainer = null
             this.warningContainerTimeout = null
         }, 120000);
-        
+
     }
 
     private closeSideMenu(): void {
diff --git a/front/src/Phaser/Menu/ReportMenu.ts b/front/src/Phaser/Menu/ReportMenu.ts
index c5d59f38..e8b20531 100644
--- a/front/src/Phaser/Menu/ReportMenu.ts
+++ b/front/src/Phaser/Menu/ReportMenu.ts
@@ -7,11 +7,11 @@ export const gameReportRessource = 'resources/html/gameReport.html';
 
 export class ReportMenu extends Phaser.GameObjects.DOMElement {
     private opened: boolean = false;
-    
+
     private userId!: number;
     private userName!: string|undefined;
     private anonymous: boolean;
-    
+
     constructor(scene: Phaser.Scene, anonymous: boolean) {
         super(scene, -2000, -2000);
         this.anonymous = anonymous;
@@ -23,7 +23,7 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
             const textToHide = this.getChildByID('askActionP') as HTMLElement;
             textToHide.hidden = true;
         }
-        
+
         scene.add.existing(this);
         MenuScene.revealMenusAfterInit(this, gameReportKey);
 
@@ -45,10 +45,10 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
             this.close();
             return;
         }
-        
+
         this.userId = userId;
         this.userName = userName;
-        
+
         const mainEl = this.getChildByID('gameReport') as HTMLElement;
         this.x = this.getCenteredX(mainEl);
         this.y = this.getHiddenY(mainEl);
@@ -82,7 +82,7 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
             ease: 'Power3'
         });
     }
-    
+
     //todo: into a parent class?
     private getCenteredX(mainEl: HTMLElement): number {
         return window.innerWidth / 4 - mainEl.clientWidth / 2;
@@ -93,7 +93,7 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
     private getCenteredY(mainEl: HTMLElement): number {
         return window.innerHeight / 4 - mainEl.clientHeight / 2;
     }
-    
+
     private toggleBlock(): void {
         !blackListManager.isBlackListed(this.userId) ? blackListManager.blackList(this.userId) : blackListManager.cancelBlackList(this.userId);
         this.close();
@@ -109,10 +109,10 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
             gamePError.style.display = 'block';
             return;
         }
-        gameManager.getCurrentGameScene(this.scene).connection.emitReportPlayerMessage(
+        gameManager.getCurrentGameScene(this.scene).connection?.emitReportPlayerMessage(
             this.userId,
             gameTextArea.value
         );
         this.close();
     }
-}
\ No newline at end of file
+}
diff --git a/front/src/index.ts b/front/src/index.ts
index 268f857d..26155146 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -2,7 +2,7 @@ import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import "../dist/resources/style/index.scss";
 
-import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, isMobile, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {LoginScene} from "./Phaser/Login/LoginScene";
 import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
 import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
@@ -17,6 +17,7 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 import {iframeListener} from "./Api/IframeListener";
+import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobileScene';
 
 const {width, height} = coWebsiteManager.getGameSize();
 
@@ -67,14 +68,22 @@ switch (phaserMode) {
         throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"');
 }
 
-
 const config: GameConfig = {
     type: mode,
     title: "WorkAdventure",
     width: width / RESOLUTION,
     height: height / RESOLUTION,
     parent: "game",
-    scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
+    scene: [EntryScene, 
+        LoginScene,
+        isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
+        SelectCompanionScene, 
+        EnableCameraScene, 
+        ReconnectingScene, 
+        ErrorScene, 
+        CustomizeScene, 
+        MenuScene, 
+        HelpCameraSettingsScene],
     zoom: RESOLUTION,
     fps: fps,
     dom: {
diff --git a/front/tests/Phaser/Map/LayersIteratorTest.ts b/front/tests/Phaser/Map/LayersIteratorTest.ts
new file mode 100644
index 00000000..3b9d0d9b
--- /dev/null
+++ b/front/tests/Phaser/Map/LayersIteratorTest.ts
@@ -0,0 +1,147 @@
+import "jasmine";
+import {Room} from "../../../src/Connexion/Room";
+import {LayersIterator} from "../../../src/Phaser/Map/LayersIterator";
+
+describe("Layers iterator", () => {
+    it("should iterate maps with no group", () => {
+        const layersIterator = new LayersIterator({
+            "compressionlevel":-1,
+            "height":2,
+            "infinite":false,
+            "layers":[
+                {
+                    "data":[0, 0, 0, 0],
+                    "height":2,
+                    "id":1,
+                    "name":"Tile Layer 1",
+                    "opacity":1,
+                    "type":"tilelayer",
+                    "visible":true,
+                    "width":2,
+                    "x":0,
+                    "y":0
+                },
+                {
+                    "data":[0, 0, 0, 0],
+                    "height":2,
+                    "id":1,
+                    "name":"Tile Layer 2",
+                    "opacity":1,
+                    "type":"tilelayer",
+                    "visible":true,
+                    "width":2,
+                    "x":0,
+                    "y":0
+                }],
+            "nextlayerid":2,
+            "nextobjectid":1,
+            "orientation":"orthogonal",
+            "renderorder":"right-down",
+            "tiledversion":"2021.03.23",
+            "tileheight":32,
+            "tilesets":[],
+            "tilewidth":32,
+            "type":"map",
+            "version":1.5,
+            "width":2
+        })
+
+        const layers = [];
+        for (const layer of layersIterator) {
+            layers.push(layer.name);
+        }
+        expect(layers).toEqual(['Tile Layer 1', 'Tile Layer 2']);
+    });
+
+    it("should iterate maps with recursive groups", () => {
+        const layersIterator = new LayersIterator({
+            "compressionlevel":-1,
+            "height":2,
+            "infinite":false,
+            "layers":[
+                {
+                    "id":6,
+                    "layers":[
+                        {
+                            "id":5,
+                            "layers":[
+                                {
+                                    "data":[0, 0, 0, 0],
+                                    "height":2,
+                                    "id":10,
+                                    "name":"Tile3",
+                                    "opacity":1,
+                                    "type":"tilelayer",
+                                    "visible":true,
+                                    "width":2,
+                                    "x":0,
+                                    "y":0
+                                },
+                                {
+                                    "data":[0, 0, 0, 0],
+                                    "height":2,
+                                    "id":9,
+                                    "name":"Tile2",
+                                    "opacity":1,
+                                    "type":"tilelayer",
+                                    "visible":true,
+                                    "width":2,
+                                    "x":0,
+                                    "y":0
+                                }],
+                            "name":"Group 3",
+                            "opacity":1,
+                            "type":"group",
+                            "visible":true,
+                            "x":0,
+                            "y":0
+                        },
+                        {
+                            "id":7,
+                            "layers":[
+                                {
+                                    "data":[0, 0, 0, 0],
+                                    "height":2,
+                                    "id":8,
+                                    "name":"Tile1",
+                                    "opacity":1,
+                                    "type":"tilelayer",
+                                    "visible":true,
+                                    "width":2,
+                                    "x":0,
+                                    "y":0
+                                }],
+                            "name":"Group 2",
+                            "opacity":1,
+                            "type":"group",
+                            "visible":true,
+                            "x":0,
+                            "y":0
+                        }],
+                    "name":"Group 1",
+                    "opacity":1,
+                    "type":"group",
+                    "visible":true,
+                    "x":0,
+                    "y":0
+                }],
+            "nextlayerid":11,
+            "nextobjectid":1,
+            "orientation":"orthogonal",
+            "renderorder":"right-down",
+            "tiledversion":"2021.03.23",
+            "tileheight":32,
+            "tilesets":[],
+            "tilewidth":32,
+            "type":"map",
+            "version":1.5,
+            "width":2
+        })
+
+        const layers = [];
+        for (const layer of layersIterator) {
+            layers.push(layer.name);
+        }
+        expect(layers).toEqual(['Group 1/Group 3/Tile3', 'Group 1/Group 3/Tile2', 'Group 1/Group 2/Tile1']);
+    });
+});
diff --git a/maps/tests/grouped_map.json b/maps/tests/grouped_map.json
new file mode 100644
index 00000000..1e6c3e35
--- /dev/null
+++ b/maps/tests/grouped_map.json
@@ -0,0 +1,102 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "id":7,
+         "layers":[
+                {
+                 "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+                 "height":10,
+                 "id":1,
+                 "name":"floor",
+                 "opacity":1,
+                 "type":"tilelayer",
+                 "visible":true,
+                 "width":10,
+                 "x":0,
+                 "y":0
+                }, 
+                {
+                 "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                 "height":10,
+                 "id":2,
+                 "name":"start",
+                 "opacity":1,
+                 "type":"tilelayer",
+                 "visible":true,
+                 "width":10,
+                 "x":0,
+                 "y":0
+                }],
+         "name":"Group 2",
+         "opacity":1,
+         "type":"group",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "id":6,
+         "layers":[
+                {
+                 "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 34, 34, 34, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                 "height":10,
+                 "id":5,
+                 "name":"jitsiConf",
+                 "opacity":1,
+                 "properties":[
+                        {
+                         "name":"jitsiRoom",
+                         "type":"string",
+                         "value":"myRoom"
+                        }],
+                 "type":"tilelayer",
+                 "visible":true,
+                 "width":10,
+                 "x":0,
+                 "y":0
+                }],
+         "name":"Group 1",
+         "opacity":1,
+         "type":"group",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":8,
+ "nextobjectid":1,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"2021.03.23",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":11,
+         "firstgid":1,
+         "image":"tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.5,
+ "width":10
+}
\ No newline at end of file
diff --git a/maps/tests/text_object.json b/maps/tests/text_object.json
new file mode 100644
index 00000000..2c3612f0
--- /dev/null
+++ b/maps/tests/text_object.json
@@ -0,0 +1,179 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 23, 23, 23, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+         "height":10,
+         "id":1,
+         "name":"floor",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":2,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":3,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":154.708861498919,
+                 "id":1,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "color":"#ffff00",
+                     "fontfamily":"Sans Serif",
+                     "text":"A yellow text that wraps automatically.\n\nIt is 16px high.",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":127.701300455634,
+                 "x":192.052147832817,
+                 "y":5.45414451778726
+                }, 
+                {
+                 "height":19,
+                 "id":3,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"Default text",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":113.494863163736,
+                 "x":1.76065884397454,
+                 "y":8.44497342134471
+                }, 
+                {
+                 "height":19,
+                 "id":5,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"A very long text with no world wrap so it keeps going"
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":349.4375,
+                 "x":1.01295161808517,
+                 "y":168.828173374613
+                }, 
+                {
+                 "height":19,
+                 "id":6,
+                 "name":"",
+                 "rotation":45,
+                 "text":
+                    {
+                     "text":"A rotated text"
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":117.607252906128,
+                 "x":62.3249441410129,
+                 "y":41.3440913604766
+                }, 
+                {
+                 "height":48.1605818096851,
+                 "id":7,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "italic":true,
+                     "pixelsize":27,
+                     "strikeout":true,
+                     "text":"Italic 27px",
+                     "underline":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":337.807030930545,
+                 "x":6.6207558122554,
+                 "y":209.952070798528
+                }, 
+                {
+                 "height":40,
+                 "id":9,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "halign":"center",
+                     "pixelsize":15,
+                     "text":"This text should appear below the plant and be centered",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":317.4375,
+                 "x":0.78125,
+                 "y":269.5
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 78, 79, 80, 0, 0, 0, 0, 0, 0, 0, 89, 90, 91, 0, 0, 0, 0, 0, 0, 0, 100, 101, 102, 0, 0, 0, 0],
+         "height":10,
+         "id":8,
+         "name":"over",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":9,
+ "nextobjectid":10,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"2021.03.23",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":11,
+         "firstgid":1,
+         "image":"tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.5,
+ "width":10
+}
\ No newline at end of file