diff --git a/asterix-app/src/main/resources/webui/querytemplate.html b/asterix-app/src/main/resources/webui/querytemplate.html
new file mode 100644
index 0000000..79130e1
--- /dev/null
+++ b/asterix-app/src/main/resources/webui/querytemplate.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta name="description" content="ASTERIX WEB PAGE" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'>
+<script src="http://code.jquery.com/jquery.min.js"></script>
+<script src="http://www.jacklmoore.com/js/jquery.autosize.js"></script>
+  
+<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
+<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
+
+  
+<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
+
+<script type="text/javascript">
+$(document).ready(function(){
+   $('textarea').autosize();
+
+   $("form#queryform").submit(function() {
+     $.post("/", $("form#queryform").serialize(), function(data) {
+       $('#output-message').html(data);
+     });
+     return false;
+   });
+});
+</script>
+
+<meta charset=utf-8 />
+<title>ASTERIX Demo</title>
+<style id="jsbin-css">
+body {
+    background: none repeat scroll 0 0 white;
+    color: #222222;
+    font-family: 'Bitter';
+    font-size: 14px;
+    line-height: 17px;
+    width: 100%;
+}
+
+.content {
+    margin-top: 70px;
+}
+
+label.query, label.result {
+    font-size: 24px;
+    padding-bottom: 10px;
+    font-weight: bold;
+}
+
+div.host {
+    float: left;
+    margin: 0 100px 0 10px;
+}
+
+div.port {
+}
+
+div.left {
+    float: left;
+    width: 320px;
+    padding: 0 20px 0 10px;
+}
+
+div.right {
+}
+
+button.btn {
+    clear: both;
+    float: left;
+    margin: 20px 0 0 10px;;
+}
+
+textarea.query {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: 16px;
+    line-height: 20px;
+    font-family: bitter, helvetica;
+    width: 100%;
+    padding: 10px;
+    color: #999;
+    resize: none;
+    border: 10px solid #eee;
+}
+
+textarea.query:focus {
+    outline: none;
+    color: #333;
+}
+
+label {
+    padding-top: 10px;
+}
+
+input[type=text] {
+    height: 20px;
+}
+
+pre {
+    overflow: auto;
+    white-space: pre;
+}
+
+div.output label.heading {
+    font-size: 24px;
+    margin-top: 2px;
+    padding-bottom: 10px;
+    font-weight: bold;
+}
+
+div.output .message {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #000;
+    resize: none;
+}
+
+div.error label.heading {
+    color: #ff2020;
+    font-size: 24px;
+    margin-top: 2px;
+    padding-bottom: 10px;
+    font-weight: bold;
+}
+
+div.error .message {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: 0;
+    outline: thin dotted 9;
+
+    -webkit-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);
+    -moz-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
+    box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);
+    color: #000;
+    resize: none;
+    border: 1px solid #eee;
+    margin-top: 7px;
+    padding: 20px 20px 20px 20px;
+}
+
+.footer {
+   margin-top: 40px;
+}
+
+.footer .line {
+    border-top: 1px solid #EEEEEE;
+    bottom: 20px;
+    height: 10px;
+    left: 0;
+    position: fixed;
+    width: 100%;
+}
+
+.footer .content {
+    background: none repeat scroll 0 0 #FFFFFF;
+    bottom: 0;
+    color: #666666;
+    font-size: 12px;
+    height: 25px;
+    left: 0;
+    padding-top: 5px;
+    position: fixed;
+    width: 100%;
+}
+
+.footer .content .left {
+    padding-left: 20px;
+    float: left;
+}
+
+.footer .content .right {
+    padding-right: 20px;
+    float: right;
+}
+</style>
+</head>
+
+<body>
+  <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar-inner">
+      <div class="container">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </a>
+        <a class="brand" href="#">ASTERIX</a>
+        <div class="nav-collapse collapse">
+          <ul class="nav">
+            <li><a href="http://code.google.com/p/asterixdb/source/browse/">Open source</a></li>
+            <li><a href="http://code.google.com/p/asterixdb/issues/list">File issues</a></li>
+            <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-userst">Contact</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
+  </div>
+
+  <div class="content">
+    <div class="container">
+      <div class="row-fluid">
+        <div class="span6">
+          <form id="queryform" class="form-horizontal" method="post">
+            <div>
+              <label class="query">Query</label>
+              <textarea rows="20" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
+            </div>
+            <div>
+              <div class="left">
+                <label class="checkbox"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label>
+              </div>
+              <div class="right">
+                <label class="checkbox"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
+              </div>
+            </div>
+            <div>
+              <div class="left">
+                <label class="checkbox"><input type="checkbox" name="print-logical-plan" value="true" /> Print logical plan</label>
+              </div>
+              <div class="right">
+                <label class="checkbox"><input type="checkbox" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
+              </div>
+            </div>
+            <div>
+              <div class="left">
+                <label class="checkbox"><input type="checkbox" name="print-job" value="true" /> Print hyracks job</label>
+              </div>
+            </div>
+            <button type="submit" class="btn btn-danger">Execute</button>
+          </form>
+        </div>
+
+        <div class="span6">
+         <div class="output">
+           <label class="heading">Output</label>
+           <div id="output-message" class="message">
+           </div>
+         </div>
+       </div>
+      </div>
+    </div>
+  </div>
+  <div class="footer">
+    <section class="line"><hr></section>
+    <section class="content">
+      <section class="left">
+        Developed by ASTERIX group
+      </section>
+      <section class="right">
+        &copy; Copyright 2013 University of California, Irvine
+      </section>
+    </section>
+  </div>
+</body>
+</html>
+