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 e1114eb..1afab97 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
@@ -197,7 +197,7 @@
 
             switch (pdf) {
                 case HTML: {
-                    out.println("<h3>Rewriten expression tree:</h3>");
+                    out.println("<h3>Rewritten expression tree:</h3>");
                     out.println("<pre>");
                     break;
                 }
@@ -380,7 +380,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 + " sec</pre>");
         }
 
     }
@@ -402,7 +402,7 @@
             }
             long endTime = System.currentTimeMillis();
             double duration = (endTime - startTime) / 1000.00;
-            out.println("<pre>Duration: " + duration + "</pre>");
+            out.println("<pre>Duration: " + duration + " sec</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 12fa51a..f6f0ef9 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
@@ -3,8 +3,11 @@
 import java.io.BufferedReader;
 import java.io.IOException;
 import java.io.InputStream;
+import java.io.OutputStream;
 import java.io.InputStreamReader;
 import java.io.PrintWriter;
+import java.io.File;
+import java.io.FileInputStream;
 import java.util.List;
 import java.util.logging.Level;
 
@@ -12,6 +15,7 @@
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
+import javax.activation.MimetypesFileTypeMap;
 
 import edu.uci.ics.asterix.api.common.APIFramework.DisplayFormat;
 import edu.uci.ics.asterix.api.common.SessionConfig;
@@ -78,7 +82,7 @@
             aqlTranslator.compileAndExecute(hcc, hds, false);
             long endTime = System.currentTimeMillis();
             duration = (endTime - startTime) / 1000.00;
-            out.println("<PRE>Duration of all jobs: " + duration + "</PRE>");
+            out.println("<PRE>Duration of all jobs: " + duration + " sec</PRE>");
         } catch (ParseException | TokenMgrError | edu.uci.ics.asterix.aqlplus.parser.TokenMgrError pe) {
             out.println("<pre class=\"error\">");
             String message = pe.getMessage();
@@ -109,21 +113,44 @@
     @Override
     public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
         String resourcePath = null;
-        response.setCharacterEncoding("utf-8");
-        PrintWriter out = response.getWriter();
         String requestURI = request.getRequestURI();
+
         if (requestURI.equals("/")) {
             response.setContentType("text/html");
             resourcePath = "/webui/querytemplate.html";
         } else {
             resourcePath = requestURI;
         }
-
+                
         InputStream is = APIServlet.class.getResourceAsStream(resourcePath);
         if (is == null) {
             response.sendError(HttpServletResponse.SC_NOT_FOUND);
             return;
         }
+        
+        if (resourcePath.endsWith(".png")) {
+            // Handle PNG content for webui
+            response.setContentType(new MimetypesFileTypeMap().getContentType(resourcePath));
+
+            // Read image file size
+            File pngFile = new File(resourcePath);
+            response.setContentLength((int)pngFile.length());
+
+            // Initialize filestreams, and write to output
+            OutputStream pngOut = response.getOutputStream();
+
+            byte[] buf = new byte[1024];
+            int len;
+            while ((len = is.read(buf)) >= 0) {
+                pngOut.write(buf, 0, len);
+            }
+
+            // Close streams
+            pngOut.close();
+            return;
+        }
+        
+        response.setCharacterEncoding("utf-8");
         InputStreamReader isr = new InputStreamReader(is);
         StringBuilder sb = new StringBuilder();
         BufferedReader br = new BufferedReader(isr);
@@ -134,6 +161,7 @@
             line = br.readLine();
         }
 
+        PrintWriter out = response.getWriter();
         out.println(sb.toString());
     }
 
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 d4e5e22..7f7db19 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
@@ -1449,6 +1449,7 @@
                 }
                 switch (pdf) {
                     case HTML:
+                        out.println("<h3>Results:</h3>");
                         out.println("<pre>");
                         ResultUtils.prettyPrintHTML(out, response);
                         out.println("</pre>");
@@ -1559,4 +1560,4 @@
             throw new IllegalStateException(rootE);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/asterix-app/src/main/resources/webui/querytemplate.html b/asterix-app/src/main/resources/webui/querytemplate.html
index 95323bb..f0d63ec 100644
--- a/asterix-app/src/main/resources/webui/querytemplate.html
+++ b/asterix-app/src/main/resources/webui/querytemplate.html
@@ -6,6 +6,9 @@
 <link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'>
 <script src="/webui/static/js/jquery.min.js"></script>
 
+<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
+<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
+
 <link href="/webui/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <link href="/webui/static/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
 
@@ -15,10 +18,35 @@
 
 <script type="text/javascript">
 $(document).ready(function(){
+
+    $('#checkboxes-on').click(function() {
+        $('#queryform :input').prop('checked', true);
+        return false;    
+    });
+
+    $('#checkboxes-off').click(function() {
+        $('form#queryform :input').removeAttr('checked');
+        return false;    
+    });
+
+    $('#clear-query-button').click(function() {
+        $("#qry").val('');
+        return false;
+    });
+
    $("form#queryform").submit(function() {
      $('#output-message').html("");
      $.post("/", $("form#queryform").serialize(), function(data) {
-       $('#output-message').html(data);
+         
+         $('#output-message').html(data);
+
+         var contentString = data.toString();
+         if (contentString.indexOf("<PRE>Duration") !== -1) {
+            $("<div/>")
+                .addClass("alert alert-success")
+                .html("Success: Query Complete")
+                .appendTo('#output-message');
+         }
      });
      return false;
    });
@@ -26,11 +54,11 @@
 </script>
 
 <meta charset=utf-8 />
-<title>ASTERIX Demo</title>
+<title>AsterixDB Web Interface</title>
 </head>
 
 <body>
-  <div class="navbar navbar-inverse navbar-fixed-top">
+  <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
       <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -38,12 +66,16 @@
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </a>
-        <a class="brand" href="#">ASTERIX</a>
+
+        <!-- Temporary logo placeholder -->
+        <!-- <a class="brand" href="#"><img src="/webui/static/img/finalasterixlogo.png"></a> -->
+        <a class="brand" href="#"><img src="http://db.tt/J1MTCdKs"></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>
+            <li><a href="http://code.google.com/p/asterixdb/source/browse/" target="_blank">Open source<i class="icon-external-link"></i></a></li>
+            <li><a href="http://code.google.com/p/asterixdb/issues/list" target="_blank">File issues<i class="icon-external-link"></i></a></li>
+            <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-userst" target="_blank">Contact<i class="icon-external-link"></i></a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
@@ -53,42 +85,48 @@
   <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="10" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
-            </div>
-            <div>
-              <label class="checkbox"><input type="checkbox" checked="checked" name="print-expr-tree" value="true" /> Print parsed expressions</label>
-              <label class="checkbox"><input type="checkbox" checked="checked" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
-            </div>
-            <div>
-              <label class="checkbox"><input type="checkbox" checked="checked" name="print-logical-plan" value="true" /> Print logical plan</label>
-              <label class="checkbox"><input type="checkbox" checked="checked" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
-            </div>
-            <div>
-              <label class="checkbox"><input type="checkbox" checked="checked" name="print-job" value="true" /> Print hyracks job</label>
-            </div>
-            <button type="submit" class="btn btn-danger">Execute</button>
-          </form>
-        </div>
 
         <div class="span6">
+
+          <form id="queryform" class="form-horizontal" method="post">
+            <div style="margin-bottom: 1em;">
+              <label class="query">Query</label>
+              <textarea rows="10" id="qry" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea>
+              <button id="clear-query-button" style="float:right;" class="btn">Clear Query</button>
+            </div>
+            
+          <div class="btn-group">
+            <button id="checkboxes-on" class="btn">Select All Options</button>
+            <button id="checkboxes-off" class="btn">Clear All Options</button>
+          </div>
+
+            <div>
+              <label class="checkbox"><input type="checkbox" class="btn" checked="checked" name="print-expr-tree" value="true" /> Print parsed expressions</label>
+              <label class="checkbox"><input type="checkbox" checked="checked" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label>
+              <label class="checkbox"><input type="checkbox" checked="checked" name="print-logical-plan" value="true" /> Print logical plan</label>
+              <label class="checkbox"><input type="checkbox" checked="checked" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label>
+              <label class="checkbox"><input type="checkbox"
+                  checked="checked" name="print-job" value="true" /> Print Hyracks job</label>
+            </div>
+            <button type="submit" id="run-btn" class="btn btn-custom-darken">Run</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>
   <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
diff --git a/asterix-app/src/main/resources/webui/static/css/style.css b/asterix-app/src/main/resources/webui/static/css/style.css
index b8688db..d21acab 100644
--- a/asterix-app/src/main/resources/webui/static/css/style.css
+++ b/asterix-app/src/main/resources/webui/static/css/style.css
@@ -1,6 +1,6 @@
 body {
     background: none repeat scroll 0 0 white;
-    color: #222222;
+    color: black;
     font-family: 'Bitter';
     font-size: 14px;
     line-height: 17px;
@@ -8,7 +8,7 @@
 }
 
 .content {
-    margin-top: 70px;
+    margin-top: 36px;
 }
 
 label.query, label.result {
@@ -34,10 +34,10 @@
 div.right {
 }
 
-button.btn {
+#run-btn {
     clear: both;
     float: left;
-    margin: 20px 0 0 10px;;
+    margin-top: 2em;
 }
 
 textarea.query {
@@ -73,6 +73,7 @@
     margin-top: 2px;
     padding-bottom: 10px;
     font-weight: bold;
+    color : #17265a;
 }
 
 div.output .message {
@@ -137,3 +138,59 @@
     padding-right: 20px;
     float: right;
 }
+
+.navbar .brand {
+    width: 160px;
+    height: 40px;
+    overflow: visible;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+/*.navbar .nav > li > a {
+    color: #17265a;
+}*/
+
+i {
+    margin-left: 4px;
+}
+
+.btn-custom-darken.active {
+  color: rgba(255, 255, 255, 0.75);
+}
+.btn-custom-darken {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #233887;
+  background-image: -moz-linear-gradient(top, #273f97, #1d2e6e);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#273f97), to(#1d2e6e));
+  background-image: -webkit-linear-gradient(top, #273f97, #1d2e6e);
+  background-image: -o-linear-gradient(top, #273f97, #1d2e6e);
+  background-image: linear-gradient(to bottom, #273f97, #1d2e6e);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff273f97', endColorstr='#ff1d2e6e', GradientType=0);
+  border-color: #1d2e6e #1d2e6e #0d1532;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #1d2e6e;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.btn-custom-darken:hover,
+.btn-custom-darken:focus,
+.btn-custom-darken:active,
+.btn-custom-darken.active,
+.btn-custom-darken.disabled,
+.btn-custom-darken[disabled] {
+  color: #ffffff;
+  background-color: #1d2e6e;
+  *background-color: #17265a;
+}
+.btn-custom-darken:active,
+.btn-custom-darken.active {
+  background-color: #121d46 ;
+}
+
+.span6 {
+    padding: 24px;
+}
diff --git a/asterix-app/src/main/resources/webui/static/img/finalasterixlogo.jpg b/asterix-app/src/main/resources/webui/static/img/finalasterixlogo.jpg
new file mode 100644
index 0000000..0ab3727
--- /dev/null
+++ b/asterix-app/src/main/resources/webui/static/img/finalasterixlogo.jpg
Binary files differ
diff --git a/asterix-app/src/main/resources/webui/static/img/finalasterixlogo.png b/asterix-app/src/main/resources/webui/static/img/finalasterixlogo.png
new file mode 100644
index 0000000..10ce431
--- /dev/null
+++ b/asterix-app/src/main/resources/webui/static/img/finalasterixlogo.png
Binary files differ