diff --git a/tree/bus_station.css b/tree/bus_station.css
new file mode 100644
index 0000000..3255655
--- /dev/null
+++ b/tree/bus_station.css
@@ -0,0 +1,434 @@
+
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-StCaroline.woff),
+    url(fonts/Sinistre-StCaroline.otf);
+}
+@font-face {
+    font-family: jolybolditalic;
+    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
+    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
+}
+
+@font-face {
+    font-family: jolyregularitalic;
+    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
+    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
+}
+@font-face {
+    font-family: jolyregular;
+    src: url(fonts/JolyDisplay-RegularDisplay.woff),
+    url(fonts/JolyDisplay-RegularDisplay.otf);
+}
+
+@font-face {
+    font-family: jolybold;
+    src: url(fonts/JolyDisplay-BoldDisplay.woff),
+    url(fonts/JolyDisplay-BoldDisplay.otf);
+}
+
+.invert{
+    filter: invert(100%);
+}
+
+ body {
+     font-family: jolyregular;
+     font-size: 1.8vw;
+     overflow-y: hidden;
+
+ }
+
+ .instructions{
+    font-family:jolyregularitalic;
+
+ }
+    span.instructions_arrow{
+    padding-left:40px;
+    font-size: 2.4vw;
+    font-family:jolybolditalic;
+}
+
+
+
+ ::-moz-selection { /* Code for Firefox */   
+    background: transparent;
+  }
+  ::selection {
+    background: transparent;
+  }
+
+#ground_color {
+    width: 5100px;
+    height: 120%;
+    position:fixed;
+    margin:-100px;
+    background-color: white;
+    z-index:-10;
+}
+
+#ground{
+    position:absolute;
+    height:100%;
+    width:5000px;  
+}
+
+#groundline {
+    position: fixed;
+    top:130px;
+    height:0%;
+    width: 100%;
+    border-top: 1px solid;
+    z-index:-10;
+}
+
+
+div.text_container {
+    bottom: 40px;
+    left:40px;
+    right:40px;
+    position:fixed;
+    margin: auto; 
+    line-height: 1.4em;   
+}
+.game_bar {
+    top:40px;
+    right:80px;
+    position:fixed;
+    border-radius: 25vw;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-family: sinistre;
+    background-color: white;
+    border: 0.11vw black solid;
+    border-radius: 25vw;
+    color:black;
+    cursor:pointer;
+    font-size: 1.4vw;
+}
+
+button{
+    -webkit-appearance: none;
+    background-color: white;
+    border: 0.1em black solid;
+    border-radius: 25em;
+    color:black;
+    cursor:pointer;
+    font-family: jolybolditalic;
+}
+
+button:hover{
+border: 0.1em transparent solid;
+-webkit-box-shadow: 0px 0px 8px 1px  black;
+-moz-box-shadow: 0px 0px 8px 1px  black;
+box-shadow: 0px 0px 8px 1px  black;
+    
+}
+
+span.button_text{
+    font-size: 1.6vw;
+    padding: 8px;
+}
+
+#player_name{
+    font-family: jolybolditalic;
+}
+
+/*army*/ 
+
+div#player_img {
+    top: 40%;
+    left: 100%;
+    position:absolute ;
+    z-index: 2;
+    }
+
+.army {
+    position: absolute;
+    top:10%;
+    left: 5%;
+    width: 350px;
+    height: 280px;
+}
+
+
+#fighter1 {
+    top:50%;
+    left: 80%;
+    position: absolute;
+    z-index:2;
+}
+#fighter2 {
+    top:5%;
+    left: 50%;
+    position: absolute;
+    z-index:0;
+}
+#fighter3 {
+    top:20%;
+    left: 30%;
+    position: absolute;
+    z-index:2;
+}
+#fighter4 {
+    top:100%;
+    left: 45%;
+    position: absolute;
+    z-index:5;
+}
+#fighter5 {
+    top:40%;
+    left: 50%;
+    position: absolute;
+    z-index:2;
+}
+#fighter6 {
+    top:70%;
+    left: 65%;
+    position: absolute;
+    z-index:3;
+}
+#fighter7 {
+    top:68%;
+    left: 44%;
+    position: absolute;
+    z-index:3;
+}
+#fighter8 {
+    top:50%;
+    left: 5%;
+    position: absolute;
+    z-index:2;
+}
+#fighter9 {
+    top:50%;
+    left: 5%;
+    position: absolute;
+    z-index:3;
+}
+
+.children1 {
+    top:5%;
+    right: 6%;
+    position: absolute;
+}
+
+.children2 {
+    top:40%;
+    right: 2%;
+    position: absolute;
+    z-index:3;
+}
+
+.decoration {
+    top:35%;
+    right: 10%;
+    position: absolute;
+}
+
+.figure1{ 
+    bottom: 50%;
+    right: 9%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+
+.figure2{ 
+    bottom:60%;
+    right: 12%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+.figure3{ 
+    bottom:30%;
+    right: 2%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+.figure4{ 
+    bottom:25%;
+    right: 10%;
+    position: absolute;
+    z-index: 3;
+    cursor: pointer;
+}
+
+
+/*images*/ 
+
+
+.bus1 {
+    top:9%;
+    left: 17%;
+    position: absolute;
+    z-index:-1;
+
+}
+.bus2 {
+    top:47%;
+    left: 10%;
+    position: absolute;
+    z-index:5;
+}
+.bus3 {
+    bottom:38%;
+    left: 30%;
+    position: absolute;
+    z-index:4;
+}
+
+.bus4{
+    top: 10%;
+    left: 40%;
+    position: absolute;
+    z-index:1;
+}
+.bus5{
+    bottom: 20%;
+    left: 60%;
+    position: absolute;
+    z-index:6;
+}
+.bus6{
+    top: 10%;
+    right: 35%;
+    position: absolute;
+    z-index:1;
+}
+.bus7{
+    bottom: 23%;
+    right: 20%;
+    position: absolute;
+    z-index:6;
+}
+.bus8{
+    top: 10%;
+    right: 10%;
+    position: absolute;
+    z-index:1;
+}
+#warehouse{
+    top: 20%;
+    right: 2%;
+    position: absolute;
+    z-index:1;
+}
+
+/* amanda baloons*/
+
+.bubble1 {
+    right: 8%;  
+    top:12%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 140px;
+    height: 90px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 50;
+}
+.bubble1:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-width: 20px 20px 0 0;
+    border-color: #ffffff transparent transparent transparent;
+    bottom: -20px;
+    left: 32%;
+    margin-left: -10px;
+}
+.bubble1:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-width: 21px 21px 0 0;
+    border-color: #000000 transparent transparent transparent;
+    bottom: -22px;
+    left: 32%;
+    margin-left: -11px;
+    display: block;
+}
+
+.bubble2 {
+    right: 14%;  
+    top:5%;
+    position: absolute;
+    background: #ffffff;
+    color: #000000;
+    font-family: sinistre;
+    font-size: 16px;
+    line-height: 17px;
+    text-align: center;
+    width: 188px;
+    height: 52px;
+    border-radius: 10px;
+    padding: 18px;
+    border: #000000 solid 1px;
+    z-index: 50;
+}
+.bubble2:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-width: 0 20px 20px 0;
+    border-color: transparent #ffffff transparent transparent;
+    bottom: -20px;
+    left: 81%;
+    margin-left: -10px;
+}
+.bubble2:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-width: 0 21px 21px 0;
+    border-color: transparent #000000 transparent transparent;
+    bottom: -22px;
+    left: 81%;
+    margin-left: -10px;
+    display: block;
+}
+
+
+
+
+
+/* hide scroll bar */
+/* width */
+::-webkit-scrollbar {
+    color:black;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: black; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: black; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: black; 
+  }
+
+
diff --git a/tree/bus_station.html b/tree/bus_station.html
new file mode 100644
index 0000000..280dba8
--- /dev/null
+++ b/tree/bus_station.html
@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+      <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <title>bus station</title>
+    <link rel="icon" href="imgs/bus_station/car1.gif">
+    <link rel="stylesheet" href="bus_station.css">
+    
+</head>
+<body >
+
+  <div class="game_bar invert" style="display: none;">
+    cat steaks: <span class="cat_meat_bar"></span> / 4 
+  </div>
+
+    <div id="ground_color" class="invert"></div>
+
+    <div id="groundline" class="invert"></div>
+
+    <div class="army">
+      <div  id="player_img" ></div>
+      <img  id="fighter1"  src="imgs/spring_river/fighter1.gif" height="120px" >
+      <img  id="fighter2"  src="imgs/spring_river/fighter2.gif" height="120px">
+      <img  id="fighter3"  src="imgs/spring_river/fighter3.gif" height="120px">
+      <img  id="fighter4" src="imgs/spring_river/fighter4.gif" height="120px">
+      <img  id="fighter5" src="imgs/spring_river/fighter5.gif" height="120px">
+      <img  id="fighter6"  src="imgs/spring_river/fighter6.gif" height="160px">
+      <img  id="fighter7" src="imgs/spring_river/fighter7.gif" height="120px"> 
+      <img  id="fighter8" src="imgs/spring_river/fighter8.gif" height="150px">
+    </div>
+    
+<div id="ground"> 
+
+  <div class="bus1">
+    <img  id="bus1" src="imgs/bus_station/car2.gif" height="90px">
+    <img  id="bus_fire1" src="imgs/bus_station/car2_fire.gif" height="90px"style="display: none;"> 
+  </div>
+  <div class="bus2">
+    <img  id="bus2" src="imgs/bus_station/bus2.gif" height="130px">
+    <img  id="bus_fire2" src="imgs/bus_station/bus2_fire.gif" height="130px"style="display: none;"> 
+  </div>
+  <div class="bus3">
+    <img  id="bus3" src="imgs/bus_station/car3.gif" height="90px">
+    <img  id="bus_fire3" src="imgs/bus_station/car3_fire.gif" height="90px"style="display: none;"> 
+  </div>
+  <div class="bus4">
+    <img  id="bus4" src="imgs/bus_station/bus2.gif" height="130px">
+    <img  id="bus_fire4" src="imgs/bus_station/bus2_fire.gif" height="130px"style="display: none;"> 
+  </div>
+  <div class="bus5">
+    <img  id="bus5" src="imgs/bus_station/car2.gif" height="100px">
+    <img  id="bus_fire5" src="imgs/bus_station/car2_fire.gif" height="100px"style="display: none;"> 
+  </div>
+  <div class="bus6">
+    <img  id="bus6" src="imgs/bus_station/bus2.gif" height="130px">
+    <img  id="bus_fire6" src="imgs/bus_station/bus2_fire.gif" height="130px"style="display: none;"> 
+  </div>
+  <div class="bus7">
+    <img  id="bus7" src="imgs/bus_station/car2.gif" height="90px">
+    <img  id="bus_fire7" src="imgs/bus_station/car2_fire.gif" height="90px"style="display: none;"> 
+  </div>
+  <div class="bus8">
+    <img  id="bus8" src="imgs/bus_station/bus2.gif" height="130px">
+    <img  id="bus_fire8" src="imgs/bus_station/bus2_fire.gif" height="130px"style="display: none;"> 
+  </div>
+
+
+
+  <img  id="warehouse" src="imgs/bus_station/warehouse4.png" height="260px">
+
+
+
+<div class="figure1">
+  <img  id="person1"  src="imgs/bus_station/guard_human1.gif" height="80px">
+  <img  id="saurian1"  src="imgs/bus_station/guard_rept1.gif" height="100px" style="display: none;">
+</div>
+<div class="figure2">
+  <img  id="person2"   src="imgs/bus_station/guard_human2.gif"  height="130px">
+  <img  id="saurian2"  src="imgs/bus_station/guard_rept2.gif" height="110px" style="display: none;">
+</div>
+<div class="figure3">
+  <img  id="person3"   src="imgs/bus_station/guard_human3.gif"  height="110px">
+  <img  id="saurian3"  src="imgs/bus_station/guard_rept3.gif" height="115px" style="display: none;">
+</div>
+<div class="figure4">
+  <img  id="person4"  src="imgs/bus_station/guard_human4.gif"  height="100px">
+  <img  id="saurian4"  src="imgs/bus_station/guard_rept4.gif" height="120px" style="display: none;">
+</div>
+
+
+
+<div class="bubble1 invert"style="display: none;"><span id="player_name"></span>, this is a guarded entrance. No one from your world is allowed to pass.</div>
+<div class="bubble2 invert"style="display: none;">Unless you are able to pay us back with your pound of flesh. </div>
+
+
+<div class="text_container invert"> 
+
+    <div class="message1">
+    You are approaching the bus station. The entrance of the saurian headquarter should be somewhere around here.<br>  
+    <span class="instructions"><span class="instructions_arrow">→</span> Move around with your army to find the entrance!</span>
+    </div>
+    <div class="message2" style="display: none;">
+     These people look suspicious. They seem to be guarding the entrance of that warehouse.     
+    </div>
+    <div class="message3" style="display: none;">
+      The situation is getting dangerous. But remember, you still have the kitten steaks with you. <br>
+      <span class="instructions"><span class="instructions_arrow">→</span> Use them to pay the entry fee for you and your buddies</span>
+    </div>
+    <div class="message4" style="display: none;">
+      Your pawn has been accepted by the saurian guards. You are now able to enter the headquarter. 
+    </div>
+
+</div>
+<script src="jquery.min.js"></script>
+  <script>
+
+    // saves game step in the local storage 
+  window.onload = function() {
+  window.localStorage.setItem("spring_river","opened");
+  console.log ("spring river:",localStorage.spring_river);
+    }
+
+  //get player avatar from local storage
+    console.log (localStorage.myavatar)
+    var img = document.createElement("img");
+    img.src = localStorage.myavatar;
+    var player_img = document.querySelector("#player_img");
+    player_img.appendChild(img);
+
+    //get player name from local storage
+    document.querySelector('#player_name').innerHTML = localStorage.playerName;
+
+
+//adjust camera scroll
+var $div = $('.army');
+    var screenLeftMin = 50;
+    var screenLeftMax = 400;
+      
+  function adjustScroll() {
+      var playerLeft = parseInt($div.css("left"));
+      var scrollLeft = $(document).scrollLeft();
+      var screenLeft = playerLeft - scrollLeft;
+      console.log ("screenleft:", screenLeft);
+        
+      if (screenLeft > screenLeftMax ) {
+          $(document).scrollLeft(playerLeft - screenLeftMax)
+      }
+      
+            if (screenLeft < screenLeftMin ) {
+          $(document).scrollLeft(playerLeft - screenLeftMin)
+      }
+      
+      
+  }    
+   
+//move the character 
+
+$(document).keydown(function(e) {
+     var offset = $div.position();
+    console.log("offset:", offset);   
+
+      // change z-index 
+      var parent_width = $("#ground").width(); 
+      var left_val_px   = $div.css('left');
+      var left_val_only = parseInt(left_val_px); 
+      var left_Percentage = (left_val_only/parent_width) * 100; 
+      console.log ("left %", left_Percentage);
+
+      if (left_Percentage >= 7) {
+        $("#bus1,#bus2").hide();
+        $("#bus_fire1, #bus_fire2").show();
+      }
+
+      if (left_Percentage >= 24) {
+        $("#bus3").hide();
+        $("#bus_fire3").show();
+      }
+
+      if (left_Percentage >= 33) {
+        $("#bus4").hide();
+        $("#bus_fire4").show();
+      }
+      if (left_Percentage >= 52) {
+        $("#bus5,#bus6").hide();
+        $("#bus_fire5, #bus_fire6").show();
+      }
+      if (left_Percentage >= 72) {
+        $("#bus7,#bus8").hide();
+        $("#bus_fire7, #bus_fire8").show();
+      }
+
+
+     switch (e.which) {
+        case 37:
+            offset.left -= 20;
+             console.log("left");
+            break;
+
+        case 39:
+             offset.left += 20;
+             console.log("right");
+              break;
+
+       } 
+          //check the offset and prevent the character to exceed the screen dimension 
+            if (offset.left < 80) {
+                offset.left = 80;
+            }
+            if (offset.left >  $("#ground").width()  - 1200) {
+                offset.left = $("#ground").width() - 1200;
+                $(document).scrollLeft(4000);
+                $(".message1").hide();
+                $(".message2").show();
+            }
+
+            $div.css("left", offset.left);
+            $div.css("top", offset.top);
+            e.preventDefault();
+            adjustScroll();
+            
+  })
+
+  var click_counter = 0;
+
+  $(".figure1").click(function () {
+    click_counter ++;
+    $("#person1").hide();
+    $("#saurian1").show();
+    reach_counter()
+  });
+
+  $(".figure2").click(function () {
+    click_counter ++;
+    $("#person2").hide();
+    $("#saurian2").show();
+    reach_counter()
+  });
+
+  $(".figure3").click(function () {
+    click_counter ++;
+    $("#person3").hide();
+    $("#saurian3").show();
+    reach_counter()
+  });
+
+  $(".figure4").click(function () {
+    click_counter ++;
+    $("#person4").hide();
+    $("#saurian4").show();
+    reach_counter()
+  });
+  
+  var cat_meat = 4;
+  $('.cat_meat_bar').html(cat_meat);
+
+  function reach_counter() {
+    if ( click_counter == 4 ) {
+      $(".bubble1").show();
+      setTimeout( function () {
+        $(".bubble2").show();
+          setTimeout( function () {
+            $(".message2,.message1").hide();
+            $(".message3, .game_bar").show();
+          }, 2000);
+      }, 2000);
+    };
+  }
+
+
+
+
+
+    
+ </script>
+
+<script type="text/javascript" src="index.js" ></script>
+
+    
+</body>
\ No newline at end of file
diff --git a/tree/imgs/.DS_Store b/tree/imgs/.DS_Store
index c91568f..4eab105 100644
Binary files a/tree/imgs/.DS_Store and b/tree/imgs/.DS_Store differ
diff --git a/tree/imgs/bus_station/.DS_Store b/tree/imgs/bus_station/.DS_Store
new file mode 100644
index 0000000..830a90d
Binary files /dev/null and b/tree/imgs/bus_station/.DS_Store differ
diff --git a/tree/imgs/bus_station/bus1_fire.gif b/tree/imgs/bus_station/bus1_fire.gif
new file mode 100644
index 0000000..ac3e8e0
Binary files /dev/null and b/tree/imgs/bus_station/bus1_fire.gif differ
diff --git a/tree/imgs/bus_station/bus2_fire.gif b/tree/imgs/bus_station/bus2_fire.gif
new file mode 100644
index 0000000..e052104
Binary files /dev/null and b/tree/imgs/bus_station/bus2_fire.gif differ
diff --git a/tree/imgs/bus_station/bus3.gif b/tree/imgs/bus_station/bus3.gif
new file mode 100644
index 0000000..e42d97b
Binary files /dev/null and b/tree/imgs/bus_station/bus3.gif differ
diff --git a/tree/imgs/bus_station/bus3_fire.gif b/tree/imgs/bus_station/bus3_fire.gif
new file mode 100644
index 0000000..f3cb282
Binary files /dev/null and b/tree/imgs/bus_station/bus3_fire.gif differ
diff --git a/tree/imgs/bus_station/bus4.gif b/tree/imgs/bus_station/bus4.gif
new file mode 100644
index 0000000..ecf63f3
Binary files /dev/null and b/tree/imgs/bus_station/bus4.gif differ
diff --git a/tree/imgs/bus_station/bus4_fire.gif b/tree/imgs/bus_station/bus4_fire.gif
new file mode 100644
index 0000000..2d4d228
Binary files /dev/null and b/tree/imgs/bus_station/bus4_fire.gif differ
diff --git a/tree/imgs/bus_station/car1_fire.gif b/tree/imgs/bus_station/car1_fire.gif
new file mode 100644
index 0000000..8fe8feb
Binary files /dev/null and b/tree/imgs/bus_station/car1_fire.gif differ
diff --git a/tree/imgs/bus_station/car2.gif b/tree/imgs/bus_station/car2.gif
index 7690301..338e47f 100644
Binary files a/tree/imgs/bus_station/car2.gif and b/tree/imgs/bus_station/car2.gif differ
diff --git a/tree/imgs/bus_station/car2_fire.gif b/tree/imgs/bus_station/car2_fire.gif
new file mode 100644
index 0000000..da29464
Binary files /dev/null and b/tree/imgs/bus_station/car2_fire.gif differ
diff --git a/tree/imgs/bus_station/car3_fire.gif b/tree/imgs/bus_station/car3_fire.gif
new file mode 100644
index 0000000..826732f
Binary files /dev/null and b/tree/imgs/bus_station/car3_fire.gif differ
diff --git a/tree/imgs/bus_station/car4.gif b/tree/imgs/bus_station/car4.gif
deleted file mode 100644
index 338e47f..0000000
Binary files a/tree/imgs/bus_station/car4.gif and /dev/null differ
diff --git a/tree/imgs/bus_station/guard_human3.gif b/tree/imgs/bus_station/guard_human3.gif
index 82e80fb..de75294 100644
Binary files a/tree/imgs/bus_station/guard_human3.gif and b/tree/imgs/bus_station/guard_human3.gif differ
diff --git a/tree/imgs/bus_station/guard_human4.gif b/tree/imgs/bus_station/guard_human4.gif
new file mode 100644
index 0000000..e914d9e
Binary files /dev/null and b/tree/imgs/bus_station/guard_human4.gif differ
diff --git a/tree/imgs/bus_station/guard_rept3.gif b/tree/imgs/bus_station/guard_rept3.gif
new file mode 100644
index 0000000..f1267b0
Binary files /dev/null and b/tree/imgs/bus_station/guard_rept3.gif differ
diff --git a/tree/imgs/bus_station/guard_rept4.gif b/tree/imgs/bus_station/guard_rept4.gif
new file mode 100644
index 0000000..45d64b5
Binary files /dev/null and b/tree/imgs/bus_station/guard_rept4.gif differ
diff --git a/tree/imgs/bus_station/warehouse4.png b/tree/imgs/bus_station/warehouse4.png
index c03f0d1..7548d5e 100644
Binary files a/tree/imgs/bus_station/warehouse4.png and b/tree/imgs/bus_station/warehouse4.png differ
diff --git a/tree/pleiadians_saurians.html b/tree/pleiadians_saurians.html
index 0b47fcf..1a0f7a8 100644
--- a/tree/pleiadians_saurians.html
+++ b/tree/pleiadians_saurians.html
@@ -220,7 +220,7 @@ function check_pleiadians() {
                             $(".bubble5").css("zIndex", 50);
                             $(".bubble5").show();
                             setTimeout( function (){
-                                $(".message2").hide();
+                                $(".message2, .message1").hide();
                                 $(".message3").show();
                             }, 2500);
                         }, 2500);