diff --git a/templates/index.html.ep b/templates/index.html.ep
index 0f48718..1a2aa10 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -13,7 +13,7 @@
        crossorigin="anonymous"></script>
     <script>
 $(document).ready(function() {
-    $("#tabs").tabs( {
+    $("#xxxtabs").tabs( {
         "show": function(event, ui) {
             var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
             if ( oTable.length > 0 ) {
@@ -22,6 +22,7 @@
         }
     } );
 
+$(".selector").tabs({ active: 1 });
     $('#firsttable').DataTable({
         "sScrollY": "760px",
         "bScrollCollapse": true,
@@ -46,6 +47,10 @@
     } );
 });
 
+    $( function() {
+     $( "#tabs" ).tabs();
+    } );
+
 $(function() {
        $( document ).tooltip({
 			   content: function() {
@@ -385,10 +390,16 @@
       <span>  </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
 	  </form>
 	  <br>
+	<div id="tabs">
+  <ul>
+    <li><a href="#tabs-1">Semantics</a></li>
+    <li><a href="#tabs-2">Syntagmatic (collocators)</a></li>
+  </ul>
+	<div id="tabs-1">
    <div id="mytable"/>
 	  % if($lists && (@$lists) > 0 && (@$lists)[0]) {
 	    <div id="wrapper">
-        <div id="first" style="width:200px">
+        <div id="first" style="width:220px">
 		    <table class="display compact nowrap" id="firsttable">
           <thead>
 			    <tr>
@@ -459,7 +470,11 @@
 			<div id="embed">
 			</div>
 		</div>
+</div>
     <div id="cost"></div>
+</div>
+</div>
+<div id="tabs-2">
          <div id="second" style="width:500px">
 		    <table class="display compact nowrap" id="secondtable">
           <thead>
@@ -507,7 +522,8 @@
           </tbody>
 		    </table>
 </div>
-
+</div>
+</div>
 		% if($show_som) {
 		  <div id="som2">
 		  </div>