diff --git a/css/styles.css b/css/styles.css
index 05d3e09..bc82526 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -74,11 +74,7 @@ a:active { color: red; }
 Layout styles
 ------------------------*/
 
-.container
-{
-	padding: 1em 1.25em;
-	margin: 0 auto;
-}
+
 
 .header
 {
@@ -96,6 +92,46 @@ Layout styles
 	padding: 0;
 }
 
+.container
+{
+	padding: 1em 1.25em;
+	margin: 0 auto;
+}
+
+.nav.container {
+	display: grid;
+	grid-template-rows: auto 15%;
+}
+
+.nav.inputs_container {
+	grid-row: 1 / 2;
+
+	display: grid;
+	grid-template-columns: auto auto auto auto;
+	grid-auto-flow: row;
+
+}
+
+.nav.input_unit_container {
+	padding: 5px;
+	align-self: center;
+}
+
+input[type="number"] {
+	display:block;
+}
+
+.nav.input_label {
+	white-space:nowrap;
+}
+
+.nav.controls {
+	grid-row: 2 / 3;
+	justify-self: center;
+	padding-top: 5px;
+}
+
+
 .content
 {
 	padding: 0em 0em;
diff --git a/graphexp.html b/graphexp.html
index 1c88fb2..e29da8e 100644
--- a/graphexp.html
+++ b/graphexp.html
@@ -49,23 +49,38 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
 		</div>
 		-->
 		<div class="nav-bar">
-			<div class="container" id="nav_bar">
-				<ul class="nav">
-					<li>
-						Enter a field: <span id="prop_choice"><input name="search_field" id="search_field" value="" /></span>
-					</li>
-					<li>
-						Enter a Keyword/value: <input name="search_value" id="search_value" value="" />
-					</li>
-					<li><button name="search query" onclick="search_query();">Search</button></li>
-					<li><button name="clear" onclick="graph_viz.clear();">Clear</button></li>
-					<li><input type="checkbox" name="Freeze" id="freeze-in" />Freeze exploration</li>
-					<li>
-						<input type="checkbox" name="showName_box" id="showName" onclick="graphShapes.show_names()"/>Show labels
-					</li>
-					<li><input type="number" id="nbLayers" min="1" max="128" onclick="set_nb_layers()"> Nb of layers.
-					</li>
-				</ul>
+			<div class="nav container" id="nav_bar">
+				<div class="nav inputs_container">
+					<div class="nav input_unit_container">
+						<label for="search_field">Enter a field: </label>
+						<input name="search_field" id="search_field" value="" />
+					</div>
+					<div class="nav input_unit_container">
+						<label class="nav input_label" for="search_value">Enter a Keyword/value: </label>
+						<input name="search_value" id="search_value" value="" />
+					</div>
+					<div class="nav input_unit_container">
+						<label class="nav input_label" for="edge_filter">Traverse by edge: </label>
+						<input name="edge_filter" id="edge_filter" value="" />
+					</div>
+					<div class="nav input_unit_container">
+						<label class="nav input_label" for="nbLayers">Nb of layers </label>
+						<input type="number" id="nbLayers" min="1" max="128" onclick="set_nb_layers()">
+					</div>
+					<div class="nav input_unit_container">
+						<input type="checkbox" name="Freeze" id="freeze-in" />
+						<label class="nav input_label" for="freeze-in">Freeze exploration</label>
+					</div>
+
+					<div class="nav input_unit_container">
+						<input type="checkbox" name="showName_box" id="showName" onclick="graphShapes.show_names()"/>
+						<label class="nav input_label" for="showName">Show labels</label>
+					</div>
+				</div>
+				<div class="nav controls">
+					<button name="search query" onclick="search_query();">Search</button>
+					<button name="clear" onclick="graph_viz.clear();">Clear</button>
+				</div>
 			</div>
 		</div>
 		<div class="content">
diff --git a/scripts/graphioGremlin.js b/scripts/graphioGremlin.js
index 2bf2e6f..8bef7e8 100644
--- a/scripts/graphioGremlin.js
+++ b/scripts/graphioGremlin.js
@@ -134,6 +134,7 @@ var graphioGremlin = (function(){
 	         !isNaN(parseInt(value, 10));
 	}
 	function click_query(d) {
+		var edge_filter = $('#edge_filter').val();
 		// Gremlin query
 		//var gremlin_query = "g.V("+d.id+").bothE().bothV().path()"
 		// 'inject' is necessary in case of an isolated node ('both' would lead to an empty answer)
@@ -141,8 +142,8 @@ var graphioGremlin = (function(){
                 if(isNaN(id)){
                     id = '"'+id+'"';
                 }
-		var gremlin_query_nodes = 'nodes = g.V('+id+').as("node").both().as("node").select(all,"node").inject(g.V('+id+')).unfold()'
-		var gremlin_query_edges = 'edges = g.V('+id+').bothE()'
+		var gremlin_query_nodes = 'nodes = g.V('+id+').as("node").both('+(edge_filter?'"'+edge_filter+'"':'')+').as("node").select(all,"node").inject(g.V('+id+')).unfold()'
+		var gremlin_query_edges = "edges = g.V("+id+").bothE("+(edge_filter?"'"+edge_filter+"'":"")+")";
 		var gremlin_query = gremlin_query_nodes+'\n'+gremlin_query_edges+'\n'+'[nodes.toList(),edges.toList()]'
 		// while busy, show we're doing something in the messageArea.
 		$('#messageArea').html('<h3>(loading)</h3>');