diff --git a/tree/final.html b/tree/final.html
index 40b4401..07f54be 100644
--- a/tree/final.html
+++ b/tree/final.html
@@ -94,7 +94,7 @@ This might be a bit of a shock for you <span id="player_name"></span> (<span id=
     </div>
     <div class="mid_text">
         Maybe, despite everything that you had been through, you realised that you had to enter in a phase of a different kind. You made a step for yourself but what about the others? What can you do with your achievements if they cannot be translated for the outer world?
-        To survive the impact with it is not an easy task but you decided to come back home and share your journey. 
+        To survive the impact with it is not an easy task. 
         
     </div>
     <div class="quote">
diff --git a/tree/imgs/avatars/amanda.gif b/tree/imgs/avatars/amanda.gif
new file mode 100644
index 0000000..e90f855
Binary files /dev/null and b/tree/imgs/avatars/amanda.gif differ
diff --git a/tree/imgs/avatars/ball.gif b/tree/imgs/avatars/ball.gif
new file mode 100644
index 0000000..08140bd
Binary files /dev/null and b/tree/imgs/avatars/ball.gif differ
diff --git a/tree/imgs/avatars/fantasy.gif b/tree/imgs/avatars/fantasy.gif
new file mode 100644
index 0000000..89e6ac0
Binary files /dev/null and b/tree/imgs/avatars/fantasy.gif differ
diff --git a/tree/imgs/avatars/fiction.gif b/tree/imgs/avatars/fiction.gif
new file mode 100644
index 0000000..8c5afe1
Binary files /dev/null and b/tree/imgs/avatars/fiction.gif differ
diff --git a/tree/imgs/avatars/fighter1.gif b/tree/imgs/avatars/fighter1.gif
new file mode 100644
index 0000000..4ced358
Binary files /dev/null and b/tree/imgs/avatars/fighter1.gif differ
diff --git a/tree/imgs/avatars/fire.gif b/tree/imgs/avatars/fire.gif
new file mode 100644
index 0000000..f204dd8
Binary files /dev/null and b/tree/imgs/avatars/fire.gif differ
diff --git a/tree/imgs/avatars/game.gif b/tree/imgs/avatars/game.gif
new file mode 100644
index 0000000..1831ebc
Binary files /dev/null and b/tree/imgs/avatars/game.gif differ
diff --git a/tree/imgs/avatars/glass.gif b/tree/imgs/avatars/glass.gif
new file mode 100644
index 0000000..1bdb079
Binary files /dev/null and b/tree/imgs/avatars/glass.gif differ
diff --git a/tree/imgs/avatars/hero.gif b/tree/imgs/avatars/hero.gif
new file mode 100644
index 0000000..6986a00
Binary files /dev/null and b/tree/imgs/avatars/hero.gif differ
diff --git a/tree/imgs/avatars/hero2.gif b/tree/imgs/avatars/hero2.gif
new file mode 100644
index 0000000..4afef37
Binary files /dev/null and b/tree/imgs/avatars/hero2.gif differ
diff --git a/tree/imgs/avatars/hero3.gif b/tree/imgs/avatars/hero3.gif
new file mode 100644
index 0000000..275742c
Binary files /dev/null and b/tree/imgs/avatars/hero3.gif differ
diff --git a/tree/imgs/avatars/horse.gif b/tree/imgs/avatars/horse.gif
new file mode 100644
index 0000000..47d7b27
Binary files /dev/null and b/tree/imgs/avatars/horse.gif differ
diff --git a/tree/imgs/avatars/journey2.gif b/tree/imgs/avatars/journey2.gif
new file mode 100644
index 0000000..f897b75
Binary files /dev/null and b/tree/imgs/avatars/journey2.gif differ
diff --git a/tree/imgs/avatars/oracle.gif b/tree/imgs/avatars/oracle.gif
new file mode 100644
index 0000000..d2c0a84
Binary files /dev/null and b/tree/imgs/avatars/oracle.gif differ
diff --git a/tree/imgs/avatars/parrot.gif b/tree/imgs/avatars/parrot.gif
new file mode 100644
index 0000000..9fa26d0
Binary files /dev/null and b/tree/imgs/avatars/parrot.gif differ
diff --git a/tree/imgs/avatars/rept.gif b/tree/imgs/avatars/rept.gif
new file mode 100644
index 0000000..a6ab457
Binary files /dev/null and b/tree/imgs/avatars/rept.gif differ
diff --git a/tree/imgs/avatars/sad.gif b/tree/imgs/avatars/sad.gif
new file mode 100644
index 0000000..480920e
Binary files /dev/null and b/tree/imgs/avatars/sad.gif differ
diff --git a/tree/imgs/avatars/sleep.gif b/tree/imgs/avatars/sleep.gif
new file mode 100644
index 0000000..9cc88b6
Binary files /dev/null and b/tree/imgs/avatars/sleep.gif differ
diff --git a/tree/imgs/avatars/tree.gif b/tree/imgs/avatars/tree.gif
new file mode 100644
index 0000000..8fd78a4
Binary files /dev/null and b/tree/imgs/avatars/tree.gif differ
diff --git a/tree/imgs/avatars/walk.gif b/tree/imgs/avatars/walk.gif
new file mode 100644
index 0000000..936cfb7
Binary files /dev/null and b/tree/imgs/avatars/walk.gif differ
diff --git a/tree/index.css b/tree/index.css
index 8fea844..bec4d3b 100644
--- a/tree/index.css
+++ b/tree/index.css
@@ -43,50 +43,10 @@ body{
 
   }
 
-#info_text::-moz-selection { /* Code for Firefox */   
-    background-color: white;
-    color:black;
-  }
-#info_text::selection {
-    background-color: white;
-    color:black;
-  }
-#info_button{
-    left:4%;
-    position: fixed;
-    font-size: 4vw;
-    color:#c94dff ;
-    z-index: 5;
-    cursor: pointer;
-}
-
 .blur_background {
     filter: blur(2px);
 }
 
-#info_text{
-    position: fixed;
-    font-size: 1.5vw;
-    line-height: initial;
-    z-index: 10;
-    color:#c94dff ;
-    font-family: jolyregular;
-    background-color: white;
-    top:20%;
-    right:20%;
-    left:20%;
-    padding: 20px;
-    border:1px #c94dff solid;
-    -webkit-box-shadow: 10px 10px 0px 0px #c94dff ;
-    -moz-box-shadow: 10px 10px 0px 0px #c94dff ;
-    box-shadow: 10px 10px 0px 0px #c94dff;
-}
-
-a {
-    color:#c94dff ;  
-}
-
-
 .title{
     font-family: jolybolditalic; 
 }
@@ -94,6 +54,9 @@ a {
 span.special1{
     font-family: jolybolditalic;
 }
+span.special2{
+    font-family: jolyregularitalic;
+}
 
 form {
     display: inline;
@@ -106,7 +69,7 @@ input#player_name {
 -webkit-appearance: none;
 border: 0px transparent solid;
 border-radius: 25vw;
-font-size: 4vw; 
+font-size: 3.5vw; 
 color: black;
 font-family: jolybolditalic;
 text-align: center;
@@ -117,24 +80,24 @@ box-shadow: 0px 0px 8px 8px   	 #d166ff;
 
 }
 
-
 button {
     -webkit-appearance: none;
     background-color: white;
-    border: 0.25vw black solid;
-    border-radius: 25vw;
+    border: 0.2vw black solid;
+    border-radius: 20vw;
     font-family: jolybolditalic;
     color:black;
     cursor:pointer;
+    font-size: 4vw;
+    padding-bottom:0.5vw;
 }
 button:hover {
-    border: 0.25vw   	 #d166ff solid;
-    color: 	 #d166ff;
+    border: 0.2vw #d166ff solid;
+    color: #d166ff;
 }
 
 span.button_text{
-    padding:1.2vw;
-    font-size: 4.5vw;
+    padding:1vw;
 }
 
 
@@ -142,7 +105,7 @@ div.line {
     display: inline-block;
     border-top: 0.3vw solid black;
     padding-bottom: 20px;
-    width: 20vw;
+    width: 15vw;
     transform: rotate(4deg);
 }
 
diff --git a/tree/index.html b/tree/index.html
index c3095ac..5d12b3a 100644
--- a/tree/index.html
+++ b/tree/index.html
@@ -9,19 +9,35 @@
     
 </head>
 <body>
-   <span id="info_button" >ⓘ</span>
-   <div id="info_text" style="display: none;">
-       <span class="title">When you might go astray</span> is a research project dealing with conspiracy theories, fictional narratives, and how the mutuality between the two shapes the stories of their believers. 
-       The research starts from the following questions: how much of the pervasiveness of conspiracy theories is generated by their compliance to certain narrative schemes? What happens when the legitimate need to generate counter-narratives gets trapped in other kinds of templates?
-       <br>
-       <span class="title">When you might go astray</span> deals with these questions by exploring the dangers of conspiracy theories and their entanglement with narrative schemes transforming their believers into heroes on a quest. <br>
-       The project is divided into two parts: a game, where the player is asked to undertake a journey, and an essay, examining conspiratorial narratives through the lenses of the mono-myth. 
-       <br><br>
-       <span class="title">When you might go astray</span> has been developed by <a href="https://www.annasandri.com/" target="_blank">Anna Sandri</a> during her studies at the <a href="https://www.pzwart.nl/experimental-publishing/" target="_blank">Experimental Publishing</a> master course, Piet Zwart Institute (NL).
+
+   <div class="step1">
+     <span class="special1"style="-webkit-padding-start: 15vw;">When you might go astray</span> <span class="special1">( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> 
+     is a research project exploring conspiracy fantasies <span class="special1">( <img src="imgs/avatars/ball2.gif" height="65vw"> , <img src="imgs/avatars/rept.gif" height="65vw"> , <img src="imgs/avatars/ball1.png" height="65vw"> )</span> and their entanglement with 
+     fictional narratives <span class="special2">( <img src="imgs/avatars/oracle.gif" height="65vw"> , <img src="imgs/avatars/fiction.gif" height="65vw"> , <img src="imgs/avatars/fantasy.gif" height="65vw"> )</span> transforming their believers into 
+     heroes <span class="special2">( <img src="imgs/avatars/hero2.gif" height="65vw"> , <img src="imgs/avatars/fighter1.gif" height="65vw"> , <img src="imgs/avatars/hero3.gif" height="65vw"> )</span> on a quest.
+<br>
+   <div class="line"></div> Do you want to hear more about it? <button id="step1_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step1_no"><span class="button_text"> no </span></button>       
+</div>
+   <div class="step1_2" style="display: none;">
+      <button class="backto1">←</button><span style="-webkit-padding-start: 10vw;">I'm</span> afraid <span class="special1">( <img src="imgs/avatars/sad.gif" height="65vw"> )</span> I don't have much to make you stay here in this case.<br>
+      <span style="-webkit-padding-start: 15vw;">Do</span> you maybe want to play a game <span class="special1">( <img src="imgs/avatars/game.gif" height="65vw"> )</span> ?  <button id="step1_2_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step1_2_no"><span class="button_text"> no </span></button>      
+   </div>
+   <div class="step2" style="display: none;">
+      <button class="backto1">←</button><span class="special1"style="-webkit-padding-start: 10vw;">When you might go astray</span><span class="special1"> ( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> is divided into two parts: a <span class="special1">game ( <img src="imgs/avatars/game.gif" height="65vw"> )</span> where the <span class="special1"> player ( <img src="imgs/avatars/walk.gif" height="65vw"> )</span>, is asked to undertake a <span class="special1">journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span>, and an <span class="special1"> essay ( <img src="imgs/avatars/fiction.gif" height="65vw">) </span>, examining conspiratorial narratives through the <span class="special1">lenses ( <img src="imgs/avatars/glass.gif" height="65vw"> )</span> of the mono-myth.<br> 
+      <div class="line"></div> Do you want to play the game? <button id="step2_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step2_no"><span class="button_text"> no </span></button>
+   </div>
+   <div class="step2_1" style="display: none;">
+      <button class="backto2">←</button><span class="special1"style="-webkit-padding-start: 10vw;">When you might go astray</span><span class="special1"> ( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> is divided into two parts: a <span class="special1">game ( <img src="imgs/avatars/game.gif" height="65vw"> )</span> where the <span class="special1"> player ( <img src="imgs/avatars/walk.gif" height="65vw"> )</span>, is asked to undertake a <span class="special1">journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span>, and an <span class="special1"> essay ( <img src="imgs/avatars/fiction.gif" height="65vw">) </span>, examining conspiratorial narratives through the <span class="special1">lenses ( <img src="imgs/avatars/glass.gif" height="65vw"> )</span> of the mono-myth.<br> 
+      <div class="line"></div> Do you want to read the essay? <button id="step2_1_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step2_1_no"><span class="button_text"> no </span></button>
    </div>
-    <div class="introtext">
-        <span style="-webkit-padding-start: 15vw;">It</span> looks like you have been summoned by the  <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> 
-        <div class="line"></div> you will be asked to start a journey: throughout it you will be called 
+   <div class="step3" style="display: none;">
+      <button class="backto2">←</button><span style="-webkit-padding-start: 10vw;">You</span> will be there soon, but before you need to know something. Along this <span class="special1"> journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span> , someone who we will call the <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> will follow your steps. They won't bother you. You just have to wake them up <span class="special1">( <img src="imgs/avatars/sleep.gif" height="65vw"> )</span>.<br>
+      <div class="line"></div> Do you want to summon the game's oracle?<button id="step3_yes"><span class="button_text"> yes </span></button ><span class="special1"> / </span><button id="step3_no"><span class="button_text"> no </span></button>
+   </div>
+
+    <div class="step4" style="display: none;">
+      <button class="backto3">←</button><span style="-webkit-padding-start: 10vw;">You</span> summoned the  <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> 
+         . You are now ready to start a journey: throughout it you will be called 
     <form name="nameForm">
         <input id="player_name" type="text" >
     </form>
@@ -113,7 +129,7 @@
      </span>
     </label>
 
-</form>   <div class="line3"></div> 
+</form>   <div class="line"></div> 
 
 you can press 
             <button id="gotostart" onclick="storeName()"><span class="button_text"> start </span></button>
@@ -123,9 +139,62 @@ you can press
     <script src="jquery.min.js"></script>
  <script>
     
-$("#info_button").click( function () {
-   $("#info_text").toggle();
-   $("#info_button").toggleClass("blur_background");
+$("#step1_yes").click( function () {
+   $(".step1").hide();
+   $(".step2").show();
+ });
+ $("#step1_no").click( function () {
+   $(".step1").hide();
+   $(".step1_2").show();
+ });
+
+ $("#step1_2_yes").click( function () {
+   $(".step1_2").hide();
+   $(".step3").show();
+ });
+ $("#step1_2_no").click( function () {
+   $(".step1_2").hide();
+   $(".step1").show();
+ });
+
+ $("#step2_yes").click( function () {
+   $(".step2").hide();
+   $(".step3").show();
+ });
+ $("#step2_no").click( function () {
+   $(".step2").hide();
+   $(".step2_1").show();
+ });
+
+ $("#step2_1_yes").click( function () {
+   $(".step2_1").hide();
+   window.location.href = "thesis.html";
+ });
+ $("#step2_1_no").click( function () {
+   $(".step2_1").hide();
+   $(".step1").show();
+ });
+
+ $("#step3_yes").click( function () {
+   $(".step3").hide();
+   $(".step4").show();
+ });
+ $("#step3_no").click( function () {
+   $(".step3").hide();
+   $(".step1").show();
+ });
+
+ $(".backto1").click( function () {
+   $(".step1_2, .step2").hide();
+   $(".step1").show();
+ });
+ $(".backto2").click( function () {
+   $(".step3, .step2_1").hide();
+   $(".step2").show();
+ });
+ $(".backto3").click( function () {
+   $(".step4").hide();
+   $(".step3").show();
  });
 
 /*