diff --git a/app/getannot.py b/app/getannot.py
index 895200a..69e39df 100644
--- a/app/getannot.py
+++ b/app/getannot.py
@@ -48,11 +48,11 @@ def get_annot_results(annot,name):
 		if 'selector' in item['target'][0]:
 			if len(item['target'][0]['selector'])>2:
 				if name in item['text'] or name in item['target'][0]['selector'][2]['exact']:
-					data={'text': item['text'],'extract':item['target'][0]['selector'][2]['exact'],'title':item['document']['title']}
+					data={'text': item['text'],'extract':item['target'][0]['selector'][2]['exact'],'title':item['document']['title'], 'url':item['uri']}
 					res.append(data)
 			else:
 				if name in item['text'] or name in item['target'][0]['selector'][1]['exact']:
-					data={'text': item['text'],'extract':item['target'][0]['selector'][1]['exact'],'title':item['document']['title']}
+					data={'text': item['text'],'extract':item['target'][0]['selector'][1]['exact'],'title':item['document']['title'], 'url':item['uri']}
 					res.append(data)
 	return res
 
@@ -63,11 +63,11 @@ def get_annot_book(annot,name):
 		if 'selector' in item['target'][0]:
 			if len(item['target'][0]['selector'])>2:
 				if name==item['uri']:
-					data={'text': item['text'],'extract':item['target'][0]['selector'][2]['exact'],'title':item['document']['title']}
+					data={'text': item['text'],'extract':item['target'][0]['selector'][2]['exact'],'title':item['document']['title'], 'url':item['uri']}
 					bannot.append(data)
 			else:
 				if name in item['uri']:
-					data={'text': item['text'],'extract':item['target'][0]['selector'][1]['exact'],'title':item['document']['title']}
+					data={'text': item['text'],'extract':item['target'][0]['selector'][1]['exact'],'title':item['document']['title'], 'url':item['uri']}
 					bannot.append(data)
 	return bannot
 
diff --git a/app/static/viewer/web/viewer.html b/app/static/viewer/web/viewer.html
index ab725c9..8712fed 100755
--- a/app/static/viewer/web/viewer.html
+++ b/app/static/viewer/web/viewer.html
@@ -432,7 +432,7 @@ http://sourceforge.net/adobe/cmap/wiki/License/
     //   icon: 'https://pzwiki.wdka.nl/mw-mediadesign/images/9/9c/Xppl-logo.svg'
     // }],
     onLayoutChange: {
-      width:50
+      width:'50'
     },
     sidebarAppUrl: 'http://hypothes.is/app.html'
   };
@@ -443,98 +443,6 @@ http://sourceforge.net/adobe/cmap/wiki/License/
 
 
 
-<!-- <script src="//localhost:5000/embed.js"></script> -->
-
-<!-- <script src= "/embed.js"></script> -->
-
-<!-- <script type="text/javascript">
-  window.hypothesisConfig = function () {
-  return {
-    openSidebar: true,
-    showHighlights: true,
-    branding: {
-      appBackgroundColor: 'yellow',
-      ctaBackgroundColor: 'rgba(227, 38, 54, 1)',
-      ctaTextColor: '#eee',
-      selectionFontFamily: 'archivo narrow',
-      annotationFontFamily: 'archivo narrow',
-      accentColor: 'red'
-    },
-    services: [{
-      apiUrl: 'http://localhost:5000/api/',
-      authority: 'http://localhost:5000/',
-      grantToken: '6879-rwfbfodYqhBn2OK2ODnNGkzlWUa4bPCoJi2U8pgTYHg',
-      icon: 'https://pzwiki.wdka.nl/mw-mediadesign/images/9/9c/Xppl-logo.svg'
-    }],
-    onLayoutChange: {
-      width:'100'
-    },
-    sidebarAppUrl: 'http://localhost:5000/app.html'
-  };
-};
-</script> -->
-
-
-<!-- <script  async src= "//localhost:5000/embed.js"></script> -->
-
-
-<!-- <script type="text/javascript">
-  window.hypothesisConfig = function () {
-  return {
-    openSidebar: true,
-    showHighlights: true,
-    // usernameUrl: 'localhost:8080/annotations',
-    branding: {
-      appBackgroundColor: 'yellow',
-      ctaBackgroundColor: 'rgba(227, 38, 54, 1)',
-      ctaTextColor: '#eee',
-      selectionFontFamily: 'archivo narrow',
-      annotationFontFamily: 'archivo narrow',
-      accentColor: 'red'
-    },
-    // services: {
-    //   apiUrl: 'http://localhost:5000/api/'
-    // //   authority: 'http://localhost:5000/',
-    // //   grantToken: '6879-rwfbfodYqhBn2OK2ODnNGkzlWUa4bPCoJi2U8pgTYHg',
-    // //   icon: 'https://pzwiki.wdka.nl/mw-mediadesign/images/9/9c/Xppl-logo.svg'
-    // },
-      onLayoutChange: {
-        width:'200',
-        height:'2'
-    },
-    // sidebarAppUrl: 'http://localhost:5000/app.html'
-  };
-};
-</script> -->
-
-
-
-<!-- <script>
-// wait until the page has loaded (and document.body is ready)
-document.addEventListener("DOMContentLoaded", function () {
-  var script = document.createElement("script");
-
-  script.src = "//"+window.location.hostname+":5000/embed.js";
-  script.setAttribute("async", "");
-  document.body.appendChild(script);
-})
-
-
-</script> -->
-
-<!-- <script >
-  document.getElementById("#location").src = window.location.hostname + ":5000/embed.js";
-</script> -->
-
-<!-- <script>
-document.getElementById("location").src = window.location.hostname + ":5000/embed.js";
-</script> -->
-
-<!--  <script>
-document.getElementById("demo").innerHTML =
-"Page hostname is " + window.location.hostname;
-</script> 
- -->
 
 
   </body>
diff --git a/app/templates/annotations.html b/app/templates/annotations.html
index 77bbc7e..0a52125 100644
--- a/app/templates/annotations.html
+++ b/app/templates/annotations.html
@@ -2,32 +2,32 @@
 
 {% block main %}
 <h1 class="header">Annotations of XPPL</h1>
-<nav><a href="{{ url_for('annotations_pdf') }}">Get as PDF</a></nav><nav><a href="/search_annot">search</a></nav><br><br><br><br><br><br><br><br>
+<a href="{{ url_for('annotations_pdf') }}" style="color:#ff3300;">Get as PDF</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/search_annot" style="color:#ff3300;"> Search</a><br><br><br><br><br><br><br><br>
 
 
 
 {% for row in annot.rows %}
   {% if 'selector' in row.target[0] %}
+  <p align="right" style="font-family:archivo narrow;font-size:10px;">Book</p>
+ <p align="right" style="font-family:archivo narrow;font-size:14px;">{{row.uri|replace('.pdf','')|replace('http://localhost:8080/uploads/','')|replace('.','')}}</p><br>
 
     {%for book in books%}
       {%if book.file == row.uri%}
-      <a href="books/{{book.id}}"><p align="right" style="font-family:archivo narrow;font-size:12px;">{{book.title}}</p></a><br>
+      <a href="books/{{book.id}}"><p align="right" style="font-family:archivo narrow;font-size:12px;">=d=</p></a><br>
       {% endif %}
     {% endfor %}
 
 
 
     {% if row.target[0].selector|length > 2%}
-    <p style="font-family:archivo narrow;font-size:8px;">Extracts:</p>
+    <p style="font-family:archivo narrow;font-size:10px;">Extract</p>
       <div style="font-family:archivo narrow;font-size:18px;"><i>"{{row.target[0].selector[2].exact}}"</i></div><br>
-      <p style="font-family:archivo narrow;font-size:8px;color:#ff3300;">Annotations:</p>
+      <p style="font-family:archivo narrow;font-size:10px;color:#ff3300;">Annotation</p>
         {%if 'https://www.youtube.com' in row.text %}
-          <!-- <embed src="{{row.text}}" width="50%"></embed> -->
           <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
         {%elif '.jpg' in row.text%}
           <img src="{{row.text}}" alt="{{row.document.title}}"  width="400">
         {%elif '.mp3' in row.text %}
-          <!-- <embed src="{{row.text}}" width="50%"></embed> -->
           <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
         {%else%}
           <div style="font-family:archivo narrow;font-size:18px;color:#ff3300;">{{row.text}}</div><br>
@@ -35,14 +35,16 @@
       <hr>
 
     {%else%}
+    <p style="font-family:archivo narrow;font-size:10px;">Extracts:</p>
       <div style="font-family:archivo narrow;font-size:18px;">
       <i>"{{row.target[0].selector[1].exact}}"</i></div><br>
-
+       <p style="font-family:archivo narrow;font-size:10px;color:#ff3300;">Annotations:</p>
         {%if 'https://www.youtube.com'in row.text %}
-          <!-- <embed src="{{row.text}}" width="50%"></embed> -->
           <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
         {%elif '.jpg' in row.text%}
           <img src="{{row.text}}" alt="{{row.document.title}}" width="400">
+          {%elif '.mp3' in row.text %}
+          <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
         {%else%}
           <div style="font-family:archivo narrow;font-size:18px;color:#ff3300;">{{row.text}}</div><br>
         {% endif %}
diff --git a/app/templates/results_annot.html b/app/templates/results_annot.html
index a9f47f1..c6ef032 100644
--- a/app/templates/results_annot.html
+++ b/app/templates/results_annot.html
@@ -2,35 +2,36 @@
 
 {% block main %}
 <br><br><br>
-<!-- <nav><a href="{{ url_for('mybook_pdf') }}">Get as PDF</a></nav> -->
+
 
 <form style="float:left;" action="/search_annot" method="GET">
-  Browse annotations:<br>
   <div style="float:left;" class="search">
   <input type="text" name="query" value="{{name}}">
   </div>
-  <input type="submit" value="Submit"></input>
+  <input style="background-color: grey; color:white; font-family: archivo narrow; font-size: 18px; border: none;padding: 8px 24px;" type="submit" value="browse annotations"></input>
 </form>
-<br><br><br><br><br>
+<br><br><br>
+<!-- <a href="{{ url_for('mybook_pdf')}}" style="color:#ff3300;">Get as PDF</a> -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="annotations" style="color:#ff3300;"> All annotations</a><br><br>
 
-<a  href="/annotations" style="font-family:archivo narrow;font-size:18px; float:center;">      All</a>
+<h1 class="header">Annotations/ Extracts with:&nbsp;&nbsp;<i>{{name}}</i></h1>
 
 
-<br><br><br><br>
 {% for row in res %}
+<p align="right" style="font-family:archivo narrow;font-size:10px;">Book</p>
+ <p align="right" style="font-family:archivo narrow;font-size:14px;">{{row.url|replace('.pdf','')|replace('http://localhost:8080/uploads/','')|replace('.','')}}</p><br>
+
     {%for book in books%}
-      {%if book.file == row.uri%}
-      <a href="books/{{book.id}}"><p align="right" style="font-family:archivo narrow;font-size:18px;">{{book.title}}</p></a><br>
+      {%if book.file == row.url%}
+      <a href="books/{{book.id}}"><p align="right" style="font-family:archivo narrow;font-size:18px;">=d=</p></a><br>
       {% endif %}
     {% endfor %}
 
- <p align="right" style="font-family:archivo narrow;font-size:14px;">{{row.title}}</p><br>
 
-<p style="font-family:archivo narrow;font-size:8px;">Extracts:</p>
+<p style="font-family:archivo narrow;font-size:10px;">Extract</p>
     <div style="font-family:archivo narrow;font-family:archivo narrow;font-size:18px;">
       <i>"{{ row.extract }}"</i></div><br>
 
-<p style="font-family:archivo narrow;font-size:8px;color:#ff3300;">Annotations:</p>
+<p style="font-family:archivo narrow;font-size:10px;color:#ff3300;">Annotation</p>
 {%if 'https://www.youtube.com'in row.text %}
           <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
           <hr>
diff --git a/app/views.py b/app/views.py
index 5fcdb17..1cfbb63 100755
--- a/app/views.py
+++ b/app/views.py
@@ -768,8 +768,11 @@ def annotations_pdf():
 
 @app.route('/mybook.pdf')
 def mybook_pdf():
+    name=str(request.args.get('query'))
+    annot = get_annotations()
+    res = get_annot_results(annot,name)
     # Make a PDF straight from HTML in a string.
-    html = redirect(url_for('search_annot'))
+    html = redirect(url_for('search_annot?query=the'), name=name, annot=annot, res=res)
     return render_pdf(HTML(string=html))