diff --git a/asterix-app/src/main/java/edu/uci/ics/asterix/api/common/APIFramework.java b/asterix-app/src/main/java/edu/uci/ics/asterix/api/common/APIFramework.java
index d4b4810..ea4fc67 100644
--- a/asterix-app/src/main/java/edu/uci/ics/asterix/api/common/APIFramework.java
+++ b/asterix-app/src/main/java/edu/uci/ics/asterix/api/common/APIFramework.java
@@ -157,8 +157,8 @@
             out.println();
             switch (pdf) {
                 case HTML: {
-                    out.println("<H1>Expression tree:</H1>");
-                    out.println("<PRE>");
+                    out.println("<h3>Expression tree:</h3>");
+                    out.println("<pre>");
                     break;
                 }
                 case TEXT: {
@@ -171,7 +171,7 @@
             }
             switch (pdf) {
                 case HTML: {
-                    out.println("</PRE>");
+                    out.println("</pre>");
                     break;
                 }
             }
@@ -192,8 +192,8 @@
 
             switch (pdf) {
                 case HTML: {
-                    out.println("<H1>Rewriten expression tree:</H1>");
-                    out.println("<PRE>");
+                    out.println("<h3>Rewriten expression tree:</h3>");
+                    out.println("<pre>");
                     break;
                 }
                 case TEXT: {
@@ -208,7 +208,7 @@
 
             switch (pdf) {
                 case HTML: {
-                    out.println("</PRE>");
+                    out.println("</pre>");
                     break;
                 }
             }
@@ -226,8 +226,8 @@
 
             switch (pdf) {
                 case HTML: {
-                    out.println("<H1>Logical plan:</H1>");
-                    out.println("<PRE>");
+                    out.println("<h3>Logical plan:</h3>");
+                    out.println("<pre>");
                     break;
                 }
                 case TEXT: {
@@ -244,7 +244,7 @@
 
             switch (pdf) {
                 case HTML: {
-                    out.println("</PRE>");
+                    out.println("</pre>");
                     break;
                 }
             }
@@ -280,8 +280,8 @@
                 } else {
                     switch (pdf) {
                         case HTML: {
-                            out.println("<H1>Optimized logical plan:</H1>");
-                            out.println("<PRE>");
+                            out.println("<h3>Optimized logical plan:</h3>");
+                            out.println("<pre>");
                             break;
                         }
                         case TEXT: {
@@ -296,7 +296,7 @@
                     }
                     switch (pdf) {
                         case HTML: {
-                            out.println("</PRE>");
+                            out.println("</pre>");
                             break;
                         }
                     }
@@ -339,8 +339,8 @@
         if (pc.isPrintJob()) {
             switch (pdf) {
                 case HTML: {
-                    out.println("<H1>Hyracks job:</H1>");
-                    out.println("<PRE>");
+                    out.println("<h3>Hyracks job:</h3>");
+                    out.println("<pre>");
                     break;
                 }
                 case TEXT: {
@@ -354,7 +354,7 @@
             }
             switch (pdf) {
                 case HTML: {
-                    out.println("</PRE>");
+                    out.println("</pre>");
                     break;
                 }
             }
@@ -371,7 +371,7 @@
             hcc.waitForCompletion(jobId);
             long endTime = System.currentTimeMillis();
             double duration = (endTime - startTime) / 1000.00;
-            out.println("<PRE>Duration: " + duration + "</PRE>");
+            out.println("<pre>Duration: " + duration + "</pre>");
         }
 
     }
@@ -393,7 +393,7 @@
             }
             long endTime = System.currentTimeMillis();
             double duration = (endTime - startTime) / 1000.00;
-            out.println("<PRE>Duration: " + duration + "</PRE>");
+            out.println("<pre>Duration: " + duration + "</pre>");
         }
 
     }
diff --git a/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java b/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java
index 957bcda..c37866a 100644
--- a/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java
+++ b/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java
@@ -1,9 +1,9 @@
 package edu.uci.ics.asterix.api.http.servlet;
 
 import java.io.BufferedReader;
-import java.io.File;
-import java.io.FileReader;
 import java.io.IOException;
+import java.io.InputStream;
+import java.io.InputStreamReader;
 import java.io.PrintWriter;
 import java.util.List;
 
@@ -31,275 +31,6 @@
 
     private static final String HYRACKS_DATASET_ATTR = "edu.uci.ics.asterix.HYRACKS_DATASET";
 
-    private static final String HTML_HEADER_TEMPLATE = "<!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/autosize/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();"
-            + "});"
-            + "</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;"
-            + "}"
-            + ""
-            + ""
-            + "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;"
-            + "    -webkit-border-radius: 4px 4px 4px 4px;"
-            + "    -moz-border-radius: 4px 4px 4px 4px;"
-            + "    -ms-border-radius: 4px 4px 4px 4px;"
-            + "    border-radius: 4px 4px 4px 4px;"
-            + "    color: #000;"
-            + "    resize: none;"
-            + "    border: 1px solid #eee;"
-            + "}"
-            + ""
-            + "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=\"#\">Open source</a></li>"
-            + "            <li><a href=\"#about\">File issues</a></li>"
-            + "            <li><a href=\"#contact\">Contact</a></li>"
-            + "          </ul>"
-            + "        </div><!--/.nav-collapse -->"
-            + "      </div>"
-            + "    </div>"
-            + "  </div>"
-            + "";
-    private static final String HTML_FORM_CONTENT_TEMPLATE = "  <div class=\"content\">"
-            + "    <div class=\"container\">"
-            + "      <div class=\"row-fluid\">"
-            + "        <div class=\"span6\">"
-            + "          <form 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 class=\"right\">"
-            + "                <label class=\"checkbox\"><input type=\"checkbox\" name=\"display-result\" value=\"true\" /> Display error/results</label>"
-            + "              </div>"
-            + "            </div>"
-            + "            <button type=\"submit\" class=\"btn btn-danger\">Execute</button>"
-            + "          </form>"
-            + "        </div>";
-
-    private static final String HTML_EMPTY_OUTPUT_TEMPLATE = "        <div class=\"span6\">"
-            + "          <div class=\"output\">"
-            + "            <label class=\"heading\">Output</label>"
-            + "            <div class=\"message\">"
-            + "            </div>"
-            + "          </div>"
-            + "        </div>";
-
-    private static final String HTML_OUTPUT_TEMPLATE = "<div class=\"span6\">"
-            + "  <div class=\"output\">"
-            + "    <label class=\"heading\">Output</label>"
-            + "    <table class=\"table table-bordered table-striped\">"
-            + "      %s"
-            + "    </table>"
-            + "  </div>"
-            + "</div>";
-
-    private static final String HTML_FOOTER_TEMPLATE = "      </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 2012 University of California, Irvine"
-            + "      </section>"
-            + "    </section>"
-            + "  </div>"
-            + "</body>"
-            + "</html>";
-
     @Override
     public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
         DisplayFormat format = DisplayFormat.HTML;
@@ -315,12 +46,9 @@
         String printLogicalPlanParam = request.getParameter("print-logical-plan");
         String printOptimizedLogicalPlanParam = request.getParameter("print-optimized-logical-plan");
         String printJob = request.getParameter("print-job");
-        String strDisplayResult = request.getParameter("display-result");
         response.setCharacterEncoding("utf-8");
         response.setContentType("text/html");
         PrintWriter out = response.getWriter();
-        out.println("<H1>Input statements:</H1>");
-        printInHtml(out, query);
         ServletContext context = getServletContext();
         IHyracksClientConnection hcc;
         IHyracksDataset hds;
@@ -371,35 +99,22 @@
         response.setCharacterEncoding("utf-8");
         PrintWriter out = response.getWriter();
         response.setContentType("text/html");
-        final String form = HTML_HEADER_TEMPLATE + String.format(HTML_FORM_CONTENT_TEMPLATE, "")
-                + HTML_EMPTY_OUTPUT_TEMPLATE + HTML_FOOTER_TEMPLATE;
-        out.println(form);
+
+        InputStream is = APIServlet.class.getResourceAsStream("/webui/querytemplate.html");
+        InputStreamReader isr = new InputStreamReader(is);
+        StringBuilder sb = new StringBuilder();
+        BufferedReader br = new BufferedReader(isr);
+        String line = br.readLine();
+
+        while (line != null) {
+            sb.append(line);
+            line = br.readLine();
+        }
+
+        out.println(sb.toString());
     }
 
     private static boolean isSet(String requestParameter) {
         return (requestParameter != null && requestParameter.equals("true"));
     }
-
-    private static void printInHtml(PrintWriter out, String s) {
-        out.println("<PRE>");
-        out.println(s);
-        out.println("</PRE>");
-    }
-
-    private void displayFile(File localFile, PrintWriter out) throws IOException {
-        BufferedReader reader = new BufferedReader(new FileReader(localFile));
-        String inputLine = reader.readLine();
-        int i = 0;
-        while (inputLine != null) {
-            out.println(inputLine);
-            inputLine = reader.readLine();
-            i++;
-            if (i > 500) {
-                out.println("...");
-                out.println("SKIPPING THE REST OF THE RESULTS");
-                break;
-            }
-        }
-        reader.close();
-    }
 }
diff --git a/asterix-app/src/main/java/edu/uci/ics/asterix/aql/translator/AqlTranslator.java b/asterix-app/src/main/java/edu/uci/ics/asterix/aql/translator/AqlTranslator.java
index 894747c..40b1848 100644
--- a/asterix-app/src/main/java/edu/uci/ics/asterix/aql/translator/AqlTranslator.java
+++ b/asterix-app/src/main/java/edu/uci/ics/asterix/aql/translator/AqlTranslator.java
@@ -315,6 +315,7 @@
                     }
                     switch (pdf) {
                         case HTML:
+                            out.println("<h3>Result:</h3>");
                             out.println("<pre>");
                             ResultUtils.prettyPrintHTML(out, response);
                             out.println("</pre>");