diff --git a/templates/search.html.ep b/templates/search.html.ep
index 091fd39..92aadce 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -1,54 +1,44 @@
 % if (param 'q') {
-%= search begin
-
-% unless (param 'snippet') {
+% content 'main' => begin
+%=  search begin
+%     unless (param 'snippet') {
 <div style="clear: both">
-% my $url = url_with->query(['p' => '{page}']);
-% my $pages = (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
-% $pages = $pages < 0 ? 0 : $pages;
+%       my $url = url_with->query(['p' => '{page}']);
+%       my $pages = (stash('search.totalResults') / (stash('search.itemsPerPage') || 1));
+%       $pages = $pages < 0 ? 0 : $pages;
   <div id="pagination"><%= pagination(stash('search.startPage'), $pages, $url) =%></div>
   <p class="found">Found
     <span id="total-results"><%= commify(stash('search.totalResults')) %> matches</span>
     <% if (stash 'search.bm.hit') { %> in <%= stash 'search.bm.hit' %> (<%= stash 'search.bm.result' %>)<% } %>
   </p>
 </div>
-
 %= include 'query'
-% };
+%     };
 
-
-
+<div id="search">
 <ol class="left-aligned">
-%=  search_hits begin
-%# ID, title, corpusID, author, pubDate, textClass
-  <li data-corpus-id="<%= $_->{corpusID} %>"
-      data-doc-id="<%= korap_doc_id($_) %>"
-      data-match-id="<%= korap_match_id($_) %>">
-    <div>
-      <div class="snippet"><%== $_->{snippet} %></div>
-      <div class="tokenInfo"></div>
-    </div>
-    <p>
-      <strong><%= $_->{title} %></strong>
-      <%= $_->{author} ? ' by ' . $_->{author}  : '' %>;
-      published on <%= date_format $_->{pubDate} %>
-      as <%= $_->{docID} %> (<%= $_->{corpusID} %>)
-    </p>
-    <ul class="action right">
-      <li class="close" title="close"><i class="fa fa-toggle-up"></i></li>
-      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-<!--
-      <li title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
-      <li title="Remember"><i class="fa fa-star-o"></i></li>
--->
-    </ul>
-  </li>
-%   end
+%=    search_hits begin
+%=      include 'match', match => $_
+%     end
 </ol>
+</div>
 
+%   end
 % end
 
-% }
-% else {
-%= include 'intro'
+% content 'javascript' => begin
+%=   javascript begin
+
+$("#search > ol > li:not(.active)").on("click", function (e) {
+  $(this).addClass('active');
+  e.stopPropagation();
+});
+
+$("#search > ol > li:not(.active) > ul > li.close").on("click", function (e) {
+  $(this.parentNode.parentNode).removeClass('active');
+  e.stopPropagation();
+});
+
+%   end
+% end
 % };