diff --git a/dev/demo/all.html b/dev/demo/all.html
index d2fd6ce..2e26a04 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -15,7 +15,7 @@
 	<a href="#" class="login"><span>Login</span></a>
       </div>
 
-      <form autocomplete="off" action="/kalamar">
+      <form autocomplete="off" action="/kalamar" id="searchform">
 	<div id="searchbar">
 	  <input type="search"
 		 placeholder="Find ..."
@@ -25,9 +25,12 @@
 	  <button type="submit"><span>Go</span></button>
 	  <!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
 	</div>
-	<div id="vc-view"></div>
-	in <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
-	<input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
+
+        <!-- Search in the following virtual collection -->
+        <div id="vc-view"></div>
+        in
+        <input id="vc-name" name="vc-name" type="hidden" value>
+        <input id="collection" name="collection" type="text" value="">
 	with <span class="select">
 	  <!-- Change this to js-menu -->
 	  <select name="ql" id="ql-field">
diff --git a/dev/demo/alldemo.js b/dev/demo/alldemo.js
index 1bc0ddf..d7e8525 100644
--- a/dev/demo/alldemo.js
+++ b/dev/demo/alldemo.js
@@ -534,8 +534,7 @@
 
 // KorAP.currentQuery = queryExample;
 
-require(['init'], function (init) {
-
+require(['app/en', 'init'], function (lang, init) {
   KorAP.hintArray = hintArray;
 
   // Set current virtual collection
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index 28eb844..1af080f 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -564,7 +564,7 @@
       expect(menu.element().style.opacity).toEqual("0");
       expect(menu.limit()).toEqual(6);
       menu.show();
-      expect(menu.item(0).active()).toBe(true);
+      expect(menu.item(0).active()).toBe(false);
     });
   });
 
diff --git a/dev/js/spec/menuSpec.js b/dev/js/spec/menuSpec.js
index 999ec2b..00fb8af 100644
--- a/dev/js/spec/menuSpec.js
+++ b/dev/js/spec/menuSpec.js
@@ -360,6 +360,7 @@
       ];
 
       var menu = KorAP.OwnMenu.create(list);
+      menu._firstActive = true;
       expect(menu.itemClass()).toEqual(KorAP.OwnMenuItem);
       expect(menu.element().nodeName).toEqual('UL');
       expect(menu.element().style.opacity).toEqual("0");
@@ -462,6 +463,7 @@
 
     it('should be nextable', function () {
       var menu = KorAP.HintMenu.create("cnx/", list);
+      menu._firstActive = true;
 
       // Show only 3 items
       menu.limit(3);
@@ -538,6 +540,7 @@
 
     it('should be prevable', function () {
       var menu = KorAP.HintMenu.create("cnx/", list);
+      menu._firstActive = true;
       menu.limit(3);
       expect(menu.show()).toBe(true);
 
@@ -626,6 +629,7 @@
 
     it('should be navigatable and filterable (prefix = "o")', function () {
       var menu = KorAP.HintMenu.create("cnx/", list);
+      menu._firstActive = true;
       menu.limit(2);
 
       expect(menu.prefix("o").show()).toBe(true);
@@ -680,6 +684,7 @@
 
     it('should be navigatable and filterable (prefix = "ex", "e")', function () {
       var menu = KorAP.HintMenu.create("cnx/", list);
+      menu._firstActive = true;
 
       menu.limit(2);
       expect(menu.prefix("ex").show()).toBe(true);
@@ -773,6 +778,8 @@
 
     it('should be navigatable with prefix', function () {
       var menu = KorAP.HintMenu.create("cnx/", demolist);
+      menu._firstActive = true;
+
       menu.limit(3);
 
       expect(menu.show()).toBe(true);
@@ -908,6 +915,8 @@
 
     it('should be navigatable with a prefix (1)', function () {
       var menu = KorAP.HintMenu.create("cnx/", demolist);
+      menu._firstActive = true;
+
       menu.limit(3);
 
       expect(menu.show()).toBe(true);
@@ -967,6 +976,8 @@
 
     it('should be navigatable with a prefix (2)', function () {
       var menu = KorAP.HintMenu.create("cnx/", demolist);
+      menu._firstActive = true;
+
       menu.limit(3);
       expect(menu.show()).toBe(true);
       expect(menu.prefix()).toEqual("");
@@ -1010,6 +1021,7 @@
 
     it('should be navigatable with a prefix (3)', function () {
       var menu = KorAP.HintMenu.create("cnx/", demolist);
+      menu._firstActive = true;
       menu.limit(3);
       expect(menu.show()).toBe(true);
       expect(menu.prefix()).toEqual("");
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 9354917..c960ec2 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -46,7 +46,7 @@
      * Replace Virtual Collection field
      */
     var vcname;
-    var input = document.getElementById('vc');
+    var input = document.getElementById('collection');
     if (input) {
       input.style.display = 'none';
       vcname = document.createElement('span');
@@ -122,18 +122,8 @@
 
 	// The vc is not visible
 	else {
-	  // The vc is not rendered yet
-	  if (vc === undefined) {
-	    vc = vcClass.create([
-	      ['title', 'string'],
-	      ['subTitle', 'string'],
-	      ['pubDate', 'date'],
-	      ['author', 'string']
-	    ]);
-
-	    if (KorAP.currentVC !== undefined)
-	      vc.fromJson(KorAP.currentVC);
-	  };
+	  if (vc === undefined)
+	    vc = _getCurrentVC(vcClass);
 	  view.appendChild(vc.element());
 	  this.classList.add('active');
 	};
@@ -175,6 +165,20 @@
 */
 
     /**
+     * Add VC creation on submission.
+     */
+    var form = document.getElementById('searchform');
+    if (form !== undefined) {
+      form.addEventListener('submit', function (e) {
+	if (vc === undefined)
+	  vc = _getCurrentVC(vcClass);
+
+	if (vc !== undefined)
+	  input.value = vc.toQuery();
+      });
+    };
+
+    /**
      * Init hint helper
      * has to be final because of
      * reposition
@@ -186,3 +190,18 @@
     return obj;
   });
 });
+
+// Render Virtual collection
+function _getCurrentVC (vcClass) {
+  var vc = vcClass.create([
+    ['title', 'string'],
+    ['subTitle', 'string'],
+    ['pubDate', 'date'],
+    ['author', 'string']
+  ]);
+  if (KorAP.currentVC !== undefined)
+    vc.fromJson(KorAP.currentVC);
+
+  return vc;
+};
+
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index 7c2f474..f17ec2a 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -1,3 +1,5 @@
+window.KorAP = window.KorAP || {};
+
 // Don't let events bubble up
 if (Event.halt === undefined) {
   // Don't let events bubble up
@@ -35,7 +37,9 @@
 
 
 define(function () {
+  // Todo: That's double now!
   KorAP.API = KorAP.API || {};
+  KorAP.Locale = KorAP.Locale || {};
 
   var loc = KorAP.Locale;
   loc.OR  = loc.OR  || 'or';
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 559a982..45899da 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -218,10 +218,11 @@
   div.value {
     position: absolute;
     display: inline-block;
+    z-index: 8000;
     @include choose-item;
     box-shadow: $choose-box-shadow;
     padding: 4pt;
-    margin-top: -2pt;
+    margin-top: -6pt;
     border: {
       width: $border-size;
       style: solid;
@@ -302,7 +303,7 @@
   }
 }
 
-#vc {
+#collection {
   line-height: 1em;
   border-radius: $standard-border-radius;
 }
diff --git a/lib/Kalamar/API.pm b/lib/Kalamar/API.pm
index 596b75b..a41550b 100644
--- a/lib/Kalamar/API.pm
+++ b/lib/Kalamar/API.pm
@@ -351,11 +351,18 @@
 
   # Set result values
   $index->items_per_page($json->{itemsPerPage});
-  $index->query_jsonld($json->{request}->{query});
 
-  # Temporary
-  # $json->{request}->{collection}
-  $index->collection_jsonld({
+  # Bouncing query
+  if ($json->{query}) {
+    $index->query_jsonld($json->{query});
+  }
+  # Legacy
+  elsif ($json->{request}->{query}) {
+    $index->query_jsonld($json->{request}->{query});
+  };
+
+  # Temporary:
+  my $collection_query = {
     '@type' => "koral:docGroup",
     "operation" => "operation:or",
     "operands" => [
@@ -407,7 +414,18 @@
 	"type" => "type:date"
       }
     ]
-  });
+  };
+
+
+  # Bouncing collection query
+  if ($json->{collection}) {
+    $index->collection_jsonld($json->{collection});
+  }
+
+  # Legacy
+  elsif ($json->{request}->{collection}) {
+    $index->collection_jsonld($json->{request}->{collection});
+  };
 
   $index->results(_map_matches($json->{matches}));
 
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index f714af8..017d818 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -7,15 +7,17 @@
        title="<%= loc 'login' %>"><span><%= loc 'login' %></span></a>
 -->
   </div>
-  <form autocomplete="off" action="<%= url_for 'index' %>">
+  <form autocomplete="off" action="<%= url_for 'index' %>" id="searchform">
     <div id="searchbar">
       %= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => loc('searchplaceholder'), spellcheck => 'false', autocomplete => 'off', autocorrect => 'off', autocapitalize => 'off'
       <button type="submit" title="<%= loc 'go' %>"><span><%= loc 'go' %></span></button>
     </div>
+
     <!-- Search in the following virtual collection -->
     <div id="vc-view"></div>
-    <%= loc 'in' %> <input type="hidden" id="vc-name" name="vc-name" value="<%= stash('vc-name') %>" />
-    <input type="text" name="vc" id="vc" value="<%= stash 'vc-query' %>" />
+    <%= loc 'in' %>
+    %= hidden_field 'vc-name' => stash('vc-name'), id => 'vc-name' 
+    %= text_field 'collection', id => 'collection'
 
     <%= loc 'with' %>
     <span class="select">