diff --git a/.gitignore b/.gitignore
index 7bf85c5..9f87899 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ venv
 __pycache__/
 direction.txt
 home.txt
+emotions.js
diff --git a/OodiUI/__init__.py b/OodiUI/__init__.py
index eb236b1..5497d14 100644
--- a/OodiUI/__init__.py
+++ b/OodiUI/__init__.py
@@ -5,9 +5,14 @@
 import time
 from pathlib import Path
 import sqlite3
+from flask_caching import Cache
+import asyncio
+
 
 def create_app(test_config=None):
+    cache = Cache(config={'CACHE_TYPE': 'simple'})
     app = Flask(__name__, instance_relative_config=True)
+    cache.init_app(app)
 
     if test_config is None:
         app.config.from_pyfile('config.py', silent=True)
@@ -24,21 +29,16 @@ def start_screen():
 
         return render_template('start.html')
 
+    def start_emotions():
+        ### korvaa sierran metodi halutulla metodilla alla ###
+        return sierra.search_shelved_books("kalastus")
+
     @app.route('/main', methods=['POST', 'GET'])
     def search_screen():
-        #config = Path("OodiUI/static/direction.txt")
-        #if config.is_file():
-        #    os.remove("OodiUI/static/direction.txt")
-        #config2 = Path("OodiUI/static/home.txt")
-        #if config2.is_file():
-        #    os.remove("OodiUI/static/home.txt")
-        #if request.method == 'POST':
-            #searchterm = request.form['searchfield']
-            #error = None
-            #send searchterm forward to the sierra api?
-            #if result == "":
-            #    error = 'Kirjoita hakukenttään avainsana.'
-        #flash(error)
+        first = request.args.get('first');
+        if first == "True":
+            start_emotions()
+
         return render_template('base.html')
 
     @app.route('/term_result', methods=['POST', 'GET'])
@@ -54,7 +54,11 @@ def start():
 
     @app.route('/term_result/guidance_term', methods=['POST', 'GET'])
     def guidance_term():
-        bookname = request.args.get('title')[:40]+"..." #get the booktitle
+        b_name = request.args.get('title') #get the booktitle
+        if len(b_name) > 40:
+            bookname = b_name[:40]+"..."
+        else:
+            bookname = b_name
         book_id = request.args.get('id') #get the id of the book
         print(bookname)
         print(book_id)
diff --git a/OodiUI/static/images/.DS_Store b/OodiUI/static/images/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/OodiUI/static/images/.DS_Store differ
diff --git a/OodiUI/static/images/ajax-loader.gif b/OodiUI/static/images/ajax-loader.gif
new file mode 100644
index 0000000..cbe59fb
Binary files /dev/null and b/OodiUI/static/images/ajax-loader.gif differ
diff --git a/OodiUI/static/style.css b/OodiUI/static/style.css
index 2aa0ccb..22b3fd1 100644
--- a/OodiUI/static/style.css
+++ b/OodiUI/static/style.css
@@ -1,3 +1,7 @@
+html {
+  overflow-y: scroll;
+}
+
 #start1 {
   position: fixed;
   width: 265pt;
@@ -33,8 +37,8 @@
 .w3-btn {
   position: relative;
   align-content: center;
-  width: 160pt;
-  height: 100pt;
+  width: 140pt;
+  height: 80pt;
   left: 15%;
   top: 10pt;
 }
@@ -53,35 +57,36 @@
   left: 27%;
 }
 
-#arts {
+
+#travel {
   position: absolute;
   top: 30%;
-  left: 2.5%;
+  left: 12.5%;
   height: 30%;
   width: 50%;
-  font-size:25pt;
+  font-size:20pt;
   font-weight: bold;
   color: white;
 }
 
-#travel {
+#cooking {
   position: absolute;
   top: 30%;
-  left: 16%;
+  left: 17.5%;
   height: 30%;
   width: 50%;
-  font-size:25pt;
+  font-size:20pt;
   font-weight: bold;
   color: white;
 }
 
-#cooking {
+#arts {
   position: absolute;
   top: 30%;
-  left: 0%;
+  left: 22.5%;
   height: 30%;
   width: 50%;
-  font-size:25pt;
+  font-size:20pt;
   font-weight: bold;
   color: white;
 }
@@ -89,10 +94,10 @@
 #languages {
   position: absolute;
   top: 30%;
-  left: 25%;
+  left: 6%;
   height: 30%;
   width: 50%;
-  font-size:25pt;
+  font-size:20pt;
   font-weight: bold;
   color: white;
 }
@@ -100,10 +105,10 @@
 #autobiography {
   position: absolute;
   top: 12.5%;
-  left: 22.5%;
+  left: 3%;
   height: 30%;
   width: 50%;
-  font-size:25pt;
+  font-size:20pt;
   font-weight: bold;
   color: white;
 }
@@ -111,10 +116,10 @@
 #history {
   position: absolute;
   top: 30%;
-  left: 17.5%;
+  left: 20%;
   height: 30%;
   width: 50%;
-  font-size:25pt;
+  font-size:20pt;
   font-weight: bold;
   color: white;
 }
@@ -132,43 +137,43 @@
 #travel-btn {
   position: fixed;
   background-color: rgb(2, 147, 71);
-  left: 17%;
-  top: 35%;
+  left: 20%;
+  top: 42%;
 }
 
 #cooking-btn {
   position: fixed;
   background-color: rgb(2, 147, 71);
   left: 40%;
-  top: 35%;
+  top: 42%;
 }
 
 #arts-btn {
   position: fixed;
   background-color: rgb(2, 147, 71);
-  left: 63%;
-  top: 35%;
+  left: 60%;
+  top: 42%;
 }
 
 #language-btn {
   position: fixed;
   background-color: rgb(2, 147, 71);
-  left: 17%;
-  top: 57.5%;
+  left: 20%;
+  top: 60.5%;
 }
 
 #bio-btn {
   position: fixed;
   background-color: rgb(2, 147, 71);
   left: 40%;
-  top: 57.5%;
+  top: 60.5%;
 }
 
 #history-btn {
   position: fixed;
   background-color: rgb(2, 147, 71);
-  left: 63%;
-  top: 57.5%;
+  left: 60%;
+  top: 60.5%;
 }
 
 a {
@@ -185,7 +190,8 @@ a:hover {
   position: fixed;
   text-align: center;
   font-weight: bold;
-  left: 40%;
+  left: 39%;
+  top: 3%;
   color: rgb(42, 52, 60);
   font-family: "Arial-BoldMT";
 }
@@ -197,27 +203,92 @@ a:hover {
   position: fixed;
   text-align:left;
   font-weight: bold;
-  left: 30%;
-  top: 22.5%;
+  left: 28.5%;
+  top: 32%;
   color: rgb(42, 52, 60);
   font-family: "Arial-BoldMT";
 }
 
 #search-box {
-  width: 450pt;
+  width: 365pt;
   height: 50pt;
   position: fixed;
-  top: 55pt;
+  top: 13%;
   left: 20%;
   border: 1px solid;
 }
 
 #submit-box {
   position: fixed;
-  width: 70pt;
+  width: 63pt;
   height: 50pt;
-  left: 600pt;
-  top: 55pt;
+  left: 518pt;
+  top: 13%;
+  background-color: rgb(2, 146, 71);
+}
+
+#scroll-box {
+  position: fixed;
+  top: 65pt;
+  left: 8%;
+  height: 200pt;
+  width: 615pt;
+  max-height: 200pt;
+  max-width: 615pt;
+  overflow-y: scroll;
+  border: 1px solid;
+}
+
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(0,0,0,0.5);
+  -webkit-box-shadow:: 0 0 1px rgba(255,255,255,.5);
+}
+
+.term-results {
+  position: relative;
+  width: 600pt;
+}
+
+/*#scroll2 {
+  position: fixed;
+  left: 87.5%;
+  top: 9.75%;
+  height: 285pt;
+  max-width: 70pt;
+  max-height: 285pt;
+  overflow-y: scroll;
+}*/
+
+#book-indicator {
+  position: relative;
+  width: 2pt;
+  height: 53.5pt;
+  left: 0%;
+  top: -3pt;
+}
+
+#column-span {
+  position: relative;
+  width: 100pt;
+}
+
+#span-author {
+  width: 475pt;
+}
+
+#choose-book {
+  position: relative;
+  width: 65pt;
+  height: 53.5pt;
+  left: 0%;
+  top: 0%;
+  max-height: 285pt;
   background-color: rgb(2, 146, 71);
 }
 
@@ -231,44 +302,54 @@ input[type="text"] {
 
 #search-for-category {
   position: fixed;
-  font-size: 30pt;
+  text-align: relative;
   font-family: "ArialMT";
   color: rgb(42, 52, 60);
-  text-align: center;
-  top: 50pt;
-  left: 17.5%;
+  top: 10pt;
+  left: 4%;
+  font-size: 35pt;
 }
 
 #search-result {
-  font-size: 30pt;
-  position: relative;
-  text-align: center;
+  font-size: 27pt;
+  position: fixed;
+  top: 3%;
+  left: 15.5%;
   font-family: "ArialMT";
   color: rgb(42, 52, 60);
 }
 
 #advice1 {
+  position: fixed;
   text-align: center;
   font-weight: bold;
+  font-size: 20pt;
+  top: 12.5%;
+  left: 27.5%;
   font-family: "ArialMT";
   color: rgb(42, 52, 60);
 }
 
 #advice2 {
+  position: fixed;
   text-align: center;
   font-weight: bold;
+  font-size: 20pt;
+  top: 12.5%;
+  left: 40%;
   font-family: "ArialMT";
   color: rgb(42, 52, 60);
 }
 
+/*
 .result-boxes {
-  left: 50pt;
+  position: sticky;
+  width: 450pt;
+  top: 0%;
+  left: 0%;
   margin: 5pt;
-}
-
-.term-results {
-  width: 600pt;
-}
+  overflow-y: scroll;
+}*/
 
 #look-for-book {
   position: fixed;
@@ -276,8 +357,8 @@ input[type="text"] {
   font-family: "ArialMT";
   color: rgb(42, 52, 60);
   top: 10pt;
-  left: 15%;
-  font-size: 40pt;
+  left: 7.5%;
+  font-size: 35pt;
 }
 
 #no-guidance {
@@ -309,10 +390,11 @@ input[type="text"] {
 }
 
 #back-to-main {
+  position: fixed;
   width: 160pt;
   height: 100pt;
   left: 60pt;
-  top: 10pt;
+  top: 284.5pt;
   font-family: "Arial-BoldMT";
   font-weight: bold;
   font-size: 30pt;
@@ -333,12 +415,12 @@ input[type="text"] {
 }
 
 #no-sign2 {
-  position: absolute;
+  position: fixed;
   align-items: center;
   width: 70pt;
   height: 25pt;
-  left: 27.5%;
-  top: 55%;
+  left: 105pt;
+  top: 340pt;
 }
 
 #no-sign3 {
@@ -380,7 +462,7 @@ input[type="text"] {
 #yes-child {
   position: absolute;
   top: 25%;
-  left: 2.5%;
+  left: 7%;
   height: 30%;
   width: 50%;
   color: white;
@@ -388,18 +470,18 @@ input[type="text"] {
 
 #child-to-main {
   position: absolute;
-  top: 25%;
+  top: 32%;
   left: 2.5%;
   height: 30%;
   width: 50%;
-  font-size: 30pt;
+  font-size: 23pt;
   color: white;
 }
 
 #child-to-book2 {
   position: absolute;
   top: 25%;
-  left: 2.5%;
+  left: 7%;
   height: 30%;
   width: 50%;
   font-size: 30pt;
@@ -412,7 +494,7 @@ input[type="text"] {
   font-weight: bold;
   text-align: center;
   top: 40pt;
-  left: 25%;
+  left: 18.5%;
   color: rgb(42, 52, 60);
 }
 
@@ -422,7 +504,7 @@ input[type="text"] {
   font-weight: bold;
   text-align: center;
   top: 40pt;
-  left: 25%;
+  left: 18.5%;
   color: rgb(42, 52, 60);
 }
 
@@ -432,7 +514,7 @@ input[type="text"] {
   font-weight: bold;
   text-align: center;
   top: 40pt;
-  left: 15%;
+  left: 26.5%;
   color: rgb(42, 52, 60);
 }
 
@@ -442,61 +524,63 @@ input[type="text"] {
   font-weight: bold;
   text-align: center;
   top: 40pt;
-  left: 20%;
+  left: 32.5%;
   color: rgb(42, 52, 60);
 }
 
 #leftarrow {
   position: fixed;
-  top: 280pt;
-  left: 225pt;
+  top: 250pt;
+  left: 255pt;
 }
 
 #rightarrow {
   position: fixed;
-  top: 240pt;
-  left: 225pt;
+  top: 250pt;
+  left: 262pt;
 }
 
 #uparrow {
   position: fixed;
-  top: 180pt;
-  left: 300pt;
+  top: 160pt;
+  left: 312pt;
 }
 
 #leftrightarrow {
   position: fixed;
-  top: 280pt;
-  left: 180pt;
+  top: 250pt;
+  left: 76pt;
 }
 
 #going-home1 {
-  font-size: 80pt;
+  position: fixed;
+  font-size: 70pt;
   font-family: "Arial-BoldMT";
   position: fixed;
   text-align: center;
   font-weight: bold;
-  top: -10%;
-  left: 240pt;
+  top: -5%;
+  left: 31%;
   color: rgb(42, 52, 60);
 
 }
 
 #going-home2 {
+  position: fixed;
   font-size: 35pt;
   font-family: "ArialMT";
   position: fixed;
   text-align: center;
   font-weight: lighter;
   color: rgb(42, 52, 60);
-  top: 100pt;
-  left: 180pt;
+  top: 70pt;
+  left: 13.5%;
 }
 
 #home-pic {
   position: fixed;
-  left: 30%;
-  top: 200pt;
+  left: 30.5%;
+  top: 155pt;
 }
 
 form {
@@ -509,26 +593,91 @@ form {
   display: none;
 }
 
+
 #spinner {
     position:fixed;
     width:100%;
     left:0;right:0;top:0;bottom:0;
-    background-color: rgba(255,255,255,0.7);
+    background-color: rgba(255,255,255,0.9);
     z-index:9999;
     display:none;
+
 }
 
 #spinner::after {
-    content:'Haetaan tuloksia...';
+    content:'Searching for results...';
+    text-align: center;
+    display:block;
+    font-size: 50pt;
+    position:absolute;
+    left: 10%;
+    top: 25%;
+}
+
+
+#spinner2 {
+    position:fixed;
+    text-align: center;
+    width:100%;
+    left:0;right:0;top:0;bottom:0;
+    background-color: rgba(255,255,255,0.9);
+    z-index:9999;
+    display:none;
+
+}
+
+#spinner2::after {
+    content:'Please wait a moment...';
     display:block;
+    display: -webkit-box;
+    display: -ms-flexbox;
     font-size: 50pt;
     position:absolute;
-    left:35%;
-    top:35%;
+    left:10%;
+    top:25%;
 }
 
+/*
+@keyframes blink {
+  0% {
+    opacity: .2;
+  }
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: .2;
+  }
+}
+
+#spinner span{
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+
+#spinner span:nth-child(2) {
+  animation-delay: .2s;
+}
+
+#spinner span:nth-child(3) {
+  animation-delay: .4s;
+}
+*/
+
 .pagebottom {
   position: fixed;
   top: 85%;
   width: 100%;
+  z-index: 3;
+}
+
+#oodi-last {
+  position: fixed;
+  top: 85%;
+  left: 0%;
+  width: 100%;
   z-index: -99;
+}
diff --git a/OodiUI/templates/base.html b/OodiUI/templates/base.html
index ab6054b..5c06f6e 100644
--- a/OodiUI/templates/base.html
+++ b/OodiUI/templates/base.html
@@ -5,36 +5,57 @@
 <img src= {{ url_for('static', filename = 'images/pagebottom.jpg') }} alt="oodi" class="pagebottom">
 <header>
   {% block header %}
-  <h1 id="search-header1">{% block title %}Etsi tietokirja{% endblock %}</h1>
+  <h1 id="search-header1">{% block title %}<!--Etsi tietokirja-->Find a book{% endblock %}</h1>
   {% endblock %}
 </header>
 {% block content %}
 <form action = "/term_result" method = "POST" class="search-field">
-  <input type="text" name="searchfield" id="search-box" placeholder="Kirjan tai kirjailijan nimi">
+  <input type="text" name="searchfield" id="search-box" placeholder="Name of the book or author">
   <input type="image" src="{{ url_for('static', filename='images/pieni_nuoli_oikea.svg')}}" alt="Etsi" value="Etsi" class="w3-btn w3-round-large" id="submit-box" onclick="$('#spinner').show()">
 </form>
+
 <body>
   <!-- spinner code from: http://www.menucool.com/9499/CSS-loading-spinner-with-a-semi-transparent-background-->
-  <div id="spinner"></div>
-<h1 class="search-category" id="search-header2">Etsi tietokirjan kategoria</h1>
-  <a href="/guidance_category?category=Taidekirjat&id=79000" value="Taidekirjat" name="categoryname" id="arts-btn" class="w3-btn w3-round-large">
-    <div id="arts">Taidekirjat</div>
+<div id="spinner">
+<!--Haetaan tuloksia<span>.</span><span>.</span><span>.</span>-->
+</div>
+  <h1 class="search-category" id="search-header2">Look for a book category</h1>
+<!--<h1 class="search-category" id="search-header2">Etsi tietokirjan kategoria</h1>-->
+  <a href="/guidance_category?category=Arts&id=79000" value="Taidekirjat" name="categoryname" id="arts-btn" class="w3-btn w3-round-large">
+    <div id="arts">Arts</div>
+  </a>
+  <!--<a href="/guidance_category?category=Taidekirjat&id=79000" value="Taidekirjat" name="categoryname" id="arts-btn" class="w3-btn w3-round-large">
+    <div id="arts">Taide</div>
+  </a>-->
+    <a href="/guidance_category?category=Traveling&id=46900" value="Matkailu" name="categoryname" id="travel-btn" class="w3-btn w3-round-large">
+      <div id="travel">Traveling</div>
     </a>
-  <a href="/guidance_category?category=Matkailu&id=46900" value="Matkailu" name="categoryname" id="travel-btn" class="w3-btn w3-round-large">
+  <!--<a href="/guidance_category?category=Matkailu&id=46900" value="Matkailu" name="categoryname" id="travel-btn" class="w3-btn w3-round-large">
     <div id="travel">Matkailu</div>
+  </a>-->
+  <a href="/guidance_category?category=Cooking&id=69110" value="Keittokirjat" name="categoryname" id="cooking-btn" class="w3-btn w3-round-large"><div id="cooking">Cooking</div>
   </a>
-  <a href="/guidance_category?category=Keittokirjat&id=69110" value="Keittokirjat" name="categoryname" id="cooking-btn" class="w3-btn w3-round-large"><div id="cooking">Keittokirjat</div>
-  </a>
+  <!--<a href="/guidance_category?category=Keittokirjat&id=69110" value="Keittokirjat" name="categoryname" id="cooking-btn" class="w3-btn w3-round-large"><div id="cooking">Keittokirjat</div>
+  </a>-->
   <br />
   <br />
-  <a href="/guidance_category?category=Kielet&id=85000" value="Kielet" name="categoryname" id="language-btn" class="w3-btn w3-round-large">
+  <a href="/guidance_category?category=Languages&id=85000" value="Kielet" name="categoryname" id="language-btn" class="w3-btn w3-round-large">
+    <div id="languages">Languages</div>
+  </a>
+  <!--<a href="/guidance_category?category=Kielet&id=85000" value="Kielet" name="categoryname" id="language-btn" class="w3-btn w3-round-large">
     <div id="languages">Kielet</div>
+  </a>-->
+  <a href="/guidance_category?category=Autobiographies&id=99000" value="Elämäkerrat" name="categoryname" id="bio-btn" class="w3-btn w3-round-large">
+    <div id="autobiography">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Auto-<br />biographies</div>
   </a>
-  <a href="/guidance_category?category=Elämäkerrat&id=99000" value="Elämäkerrat" name="categoryname" id="bio-btn" class="w3-btn w3-round-large">
+  <!--<a href="/guidance_category?category=Elämäkerrat&id=99000" value="Elämäkerrat" name="categoryname" id="bio-btn" class="w3-btn w3-round-large">
     <div id="autobiography">Elämä-<br />kerrat</div>
+  </a>-->
+  <a href="/guidance_category?category=History&id=90000" value="Historia" name="categoryname" id="history-btn" class="w3-btn w3-round-large"><div id="history">History</div>
   </a>
-  <a href="/guidance_category?category=Historia&id=90000" value="Historia" name="categoryname" id="history-btn" class="w3-btn w3-round-large"><div id="history">Historia</div>
-  </a>
+  <!--<a href="/guidance_category?category=Historia&id=90000" value="Historia" name="categoryname" id="history-btn" class="w3-btn w3-round-large"><div id="history">Historia</div>
+  </a>-->
+
 </body>
 {% endblock %}
 {% block head %}
diff --git a/OodiUI/templates/search/going_home.html b/OodiUI/templates/search/going_home.html
index 9a6da72..1b144a9 100644
--- a/OodiUI/templates/search/going_home.html
+++ b/OodiUI/templates/search/going_home.html
@@ -1,13 +1,14 @@
 <!doctype html>
+<html>
 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-<section class="content">
-  <header>
-    <h1 id="going-home1">Heihei!</h1>
-    <h2 id="going-home2">Palaan lähtöpisteeseen.</h2>
-  </header>
-  <head>
-    <img src= {{ url_for('static', filename = 'images/koti.jpg') }} alt="home" id="home-pic" class="home">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="{{ url_for('static', filename='home.js') }}"></script>
-    <img src= {{ url_for('static', filename = 'images/pagebottom.jpg') }} alt="oodi" class="pagebottom">
-</section>
+<header>
+  <h1 id="going-home1">Bye bye!</h1>
+  <h2 id="going-home2">I'm going back to the starting point.</h2>
+  <!--<h1 id="going-home1">Heihei!</h1>
+  <h2 id="going-home2">Palaan lähtöpisteeseen.</h2>-->
+</header>
+<img src= {{ url_for('static', filename = 'images/koti.svg') }} alt="home" id="home-pic" class="home">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="{{ url_for('static', filename='home.js') }}"></script>
+<img src= {{ url_for('static', filename = 'images/pagebottom.jpg') }} alt="oodi" id="oodi-last" class="pagebottom">
+</html>
diff --git a/OodiUI/templates/search/guidance.html b/OodiUI/templates/search/guidance.html
index 3a7ef0f..99ecbbc 100644
--- a/OodiUI/templates/search/guidance.html
+++ b/OodiUI/templates/search/guidance.html
@@ -1,20 +1,24 @@
 {% extends 'base.html' %}
 
 {% block header %}
-<h1 id="showtheway" class="wayhelp" class="hidden">Seuraa minua!</h1>
+<h1 id="showtheway" class="wayhelp" class="hidden">Let's go!</h1>
+<h1 id="lookleft" class="wayhelp" class="hidden">Search the shelf<br />on the left</h1>
+<h1 id="lookright" class="wayhelp" class="hidden">Search the shelf<br />on the right</h1>
+<h1 id="lookboth" class="wayhelp" class="hidden">Search both<br />shelves</h1>
+<!--<h1 id="showtheway" class="wayhelp" class="hidden">Seuraa minua!</h1>
 <h1 id="lookleft" class="wayhelp" class="hidden">Katso hylly<br /> vasemmalla</h1>
 <h1 id="lookright" class="wayhelp" class="hidden">Katso hylly<br /> oikealla</h1>
-<h1 id="lookboth" class="wayhelp" class="hidden">Katso molemmat<br />hyllyt</h1>
+<h1 id="lookboth" class="wayhelp" class="hidden">Katso molemmat<br />hyllyt</h1>-->
 {% endblock %}
 {#% block body %}
   <script>
   function poll()
 {% endblock %#}
 {% block content %}
-  <img src= {{ url_for('static', filename = 'images/nuoli_vasen.jpg') }} alt="left arrow" id="leftarrow" class="arrow" class="hidden">
-  <img src= {{ url_for('static', filename = 'images/nuoli_oikea.jpg') }} alt="right arrow" id="rightarrow" class="arrow" class="hidden">
-  <img src= {{ url_for('static', filename = 'images/nuoli_ylos.jpg') }} alt="up arrow" id="uparrow" class="arrow" class="hidden">
-  <img src= {{ url_for('static', filename = 'images/nuoli_molemmat.jpg') }} alt="left right arrow" id="leftrightarrow" class="arrow" class="hidden">
+  <img src= {{ url_for('static', filename = 'images/nuoli_iso_vasen.svg') }} alt="left arrow" id="leftarrow" class="arrow" class="hidden">
+  <img src= {{ url_for('static', filename = 'images/nuoli_iso_oikea.svg') }} alt="right arrow" id="rightarrow" class="arrow" class="hidden">
+  <img src= {{ url_for('static', filename = 'images/nuoli_iso_eteen.svg') }} alt="up arrow" id="uparrow" class="arrow" class="hidden">
+  <img src= {{ url_for('static', filename = 'images/nuoli_iso_molemmat.svg') }} alt="left right arrow" id="leftrightarrow" class="arrow" class="hidden">
 {% endblock %}
 {% block head %}
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
diff --git a/OodiUI/templates/search/guidance_category.html b/OodiUI/templates/search/guidance_category.html
index 3d8a127..e7cf971 100644
--- a/OodiUI/templates/search/guidance_category.html
+++ b/OodiUI/templates/search/guidance_category.html
@@ -1,15 +1,16 @@
 {% extends 'base.html' %}
 
 {% block header %}
-<h1 id="search-for-category"><center>Lähdetäänkö hakemaan kategoriaa<br /> <strong>{{categoryname}}</strong>?</center></h1>
+<h1 id="search-for-category"><center>Would you like to be guided to the category<br /> <strong>{{categoryname}}</strong>?</center></h1>
+<!--<h1 id="search-for-category"><center>Lähdetäänkö hakemaan kategoriaa<br /> <strong>{{categoryname}}</strong>?</center></h1>-->
 <br />
 <br />
 {% endblock %}
 
 {% block content %}
-<a href="/main" class="w3-button w3-round-large" id="back-to-main2">Takaisin<img src="{{ url_for('static', filename='images/pieni_nuoli_vasen.svg')}}" alt="takaisin" id="no-sign"></a>
+<a href="/main" class="w3-button w3-round-large" id="back-to-main2">Go back<img src="{{ url_for('static', filename='images/pieni_nuoli_vasen.svg')}}" alt="takaisin" id="no-sign"></a>
 <a href="/guidance?category={{categoryname}}&category_id={{section}}" id="yes-sign" class="w3-btn  w3-round-large">
-  <div id="yes-child">Etsi hylly</div>
+  <div id="yes-child">Proceed</div>
 </a>
 
 {% endblock %}
diff --git a/OodiUI/templates/search/guidance_term.html b/OodiUI/templates/search/guidance_term.html
index 0bb6e45..e5fb23a 100644
--- a/OodiUI/templates/search/guidance_term.html
+++ b/OodiUI/templates/search/guidance_term.html
@@ -1,15 +1,19 @@
 {% extends 'base.html' %}
 
 {% block header %}
-<h1 id="look-for-book">Lähdetäänkö etsimään kirjaa<br /> <strong>{{bookname}}</strong></h1>
+<h1 id="look-for-book">Would you like to be guided to the book:<br /> <strong>{{bookname}}</strong></h1>
+<!--<h1 id="look-for-book">Lähdetäänkö etsimään kirjaa<br /> <strong>{{bookname}}</strong></h1>-->
 <br />
 <br />
 {% endblock %}
 
 {% block content %}
-<a href="javascript:history.back()" class="w3-button w3-round-large" id="no-sign3">Takaisin<img src="{{ url_for('static', filename='images/pieni_nuoli_vasen.svg')}}" alt="takaisin" id="no-guidance"></a>
+<a href="javascript:history.back()" class="w3-button w3-round-large" id="no-sign3">Go back<img src="{{ url_for('static', filename='images/pieni_nuoli_vasen.svg')}}" alt="takaisin" id="no-guidance" onclick="$('#spinner2').show()"></a>
 <a href="/guidance?id={{book_id}}" id="yes-sign2" class="w3-btn w3-round-large" class="look-button">
-  <div id="child-to-book2">Etsi kirja</div>
+  <div id="child-to-book2">Proceed</div>
 </a>
+<!-- spinner code from: http://www.menucool.com/9499/CSS-loading-spinner-with-a-semi-transparent-background-->
+<div id="spinner2"><!--Haetaan tuloksia<span>.</span><span>.</span><span>.</span>-->
+</div>
 
 {% endblock %}
diff --git a/OodiUI/templates/search/term_result.html b/OodiUI/templates/search/term_result.html
index 825c783..a63b46f 100644
--- a/OodiUI/templates/search/term_result.html
+++ b/OodiUI/templates/search/term_result.html
@@ -1,24 +1,29 @@
 {% extends 'base.html' %}
 
 {% block header %}
-<br />
-<br />
+
 {% endblock %}
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 {% block content %}
-  <h1 id="search-result">Hyllyssä olevat tulokset haulle <strong>"{{searchterm}}"</strong></h1>
-  <br />
-  <a href="/main" id="back-to-main" class="w3-button w3-round-large">Takaisin<img src="{{ url_for('static', filename='images/pieni_nuoli_vasen.svg')}}" alt="takaisin" id="no-sign2"></a>
-  <br />
+  <h1 id="search-result">Available books with the keyword: <strong>{{searchterm|truncate(8, True)}}</strong></h1>
+  <!--<h1 id="search-result">Hyllyssä olevat tulokset haulle <strong>"{{searchterm}}"</strong></h1>-->
   <br />
   <br />
+  <a href="/main" id="back-to-main" class="w3-button w3-round-large">Go back<img src="{{ url_for('static', filename='images/pieni_nuoli_vasen.svg')}}" alt="takaisin" id="no-sign2"></a>
   {% if books|length == 0 %}
-    <h1 id="advice1">Ei tuloksia haulle:<strong>&nbsp;{{searchterm}}</strong></h1>
-  {% else %}
-    <h1 id="advice2">Klikkaa laatikkoa!</h1>
+  <h1 id="advice1">No results for:<strong>&nbsp;{{searchterm|truncate(20, True)}}</strong></h1>
+    <!--<h1 id="advice1">Ei tuloksia haulle:<strong>&nbsp;{{searchterm}}</strong></h1>-->
   {% endif %}
-  {% for b_id, b_info in books.items() %}
-    <a href="/term_result/guidance_term?title={{b_info['title']}}&id={{b_id}}" class=" w3-button w3-light-grey w3-left-align result-boxes"><h3 class="term-results">{{b_info['title']}}<br />Tekijä:&nbsp;{{b_info['author']}}</h3></a>
-  {% endfor %}
+  <br />
+  <div id="scroll-box">
+    {% for b_id, b_info in books.items() %}
+      <h3 class="term-results w3-row w3-light-grey"><span class="w3-col m9" id="span-author">&nbsp;{{ b_info['title']|truncate(50, True) }}<br />&nbsp;Author:&nbsp;{{b_info['author']|truncate(42, True)}}</span>
+      <span class="w3-col m3" style="text-align:right;" id="column-span"><a href="/term_result/guidance_term?title={{b_info['title']}}&id={{b_id}}" id="book-indicator">
+      <img src="{{ url_for('static', filename='images/pieni_nuoli_oikea.svg')}}" alt="Etsi" value="Etsi" class="w3-btn w3-round-large w3-left-align" id="choose-book">
+    </a></span></h3>
+    {% endfor %}
+  </div>
 
 {% endblock %}
+
+<!-- class="w3-button w3-light-grey w3-left-align result-boxes" -->
diff --git a/OodiUI/templates/start.html b/OodiUI/templates/start.html
index 68b5e2a..1058c27 100644
--- a/OodiUI/templates/start.html
+++ b/OodiUI/templates/start.html
@@ -3,19 +3,20 @@
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <header>
-      <h1 id="start1">Hei!</h1>
-      <h2 id="start2" class="header-2-text">Olen tietokirjarobotti. <br/>Opastan sinut kirjan luokse.</h2>
+      <h1 id="start1">Hey!</h1>
+      <h2 id="start2" class="header-2-text">I am a book robot. <br/>I will guide you to a book's location.</h2>
+      <!--<h1 id="start1">Hei!</h1>
+      <h2 id="start2" class="header-2-text">Olen tietokirjarobotti. <br/>Opastan sinut kirjan luokse.</h2>-->
     </header>
     <div>
-      <a href="/main" id="go-to-main" onclick="hey()" class="w3-btn w3-round-large" class="look-button">
-      <div id="child-to-main">Etsi kirja</div></a>
+      <a href="/main?first=True" id="go-to-main" class="w3-btn w3-round-large" class="look-button">
+      <div id="child-to-main">Find a book</div></a>
+      <!--<a href="/main" id="go-to-main" onclick="hey()" class="w3-btn w3-round-large" class="look-button">
+      <div id="child-to-main">Etsi kirja</div></a>-->
     </div>
 <img src= {{ url_for('static', filename = 'images/pagebottom.jpg') }} alt="oodi" class="pagebottom">
-<script>
-function hey() {
-  console.log("heippa");
-}
-</script>
+<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="{{ url_for('static', filename='emotions.js') }}"></script>-->
 </html>
 
 <!-- tee joku onclick metodi jolla saat todistettua etta funktiokasky lahtee eteenpain kun go-to-main tai child-to-mainia klikataan DONE'D. nyt vaan oikea metodikutsu niin kaikki ok-->