diff --git a/src/graphxq/app.css b/src/graphxq/app.css
index 9ebdff5..a17ebc8 100644
--- a/src/graphxq/app.css
+++ b/src/graphxq/app.css
@@ -14,7 +14,9 @@ body {
 .navbar-search .search-query {
     padding-left: 29px;
 }
-
+.popwidth {
+	width:50em;
+}
 .navbar-search .icon-search {
     position: absolute;
     top: 7px;
diff --git a/src/graphxq/app.js b/src/graphxq/app.js
index 4184c30..f7f7f62 100644
--- a/src/graphxq/app.js
+++ b/src/graphxq/app.js
@@ -5,7 +5,10 @@ $(document).ready(function(){
     if($("#editForm").length){
     setupEdit()
     };
-      resize=function(){
+    $("#infotip").popover({"html":true,
+    	  template: '<div class="popover popwidth"><div class="arrow"></div><div class="popover-inner popwidth" ><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
+    });
+    resize=function(){
      var h=$(window).height();
      $('.extend').not(':hidden').each(function(){
 	  var j=$(this)
@@ -45,10 +48,10 @@ function setupEdit(){
        $('input[name=dl]').attr('checked', download);
        $("#editForm").submit();       
     };   
-   $("#bnup").on("click",getsvg);
+   $("#bnRefresh").on("click",getsvg);
    $("#bnsvg").on("click",function(){sub(false)});
    $("#bndn").on("click",function(){sub(true)});
-   $("#dot").on("keyup",throttle(getsvg,250));
+   $("#data").on("keyup",throttle(getsvg,250));
    $("#bnxml").on("click",function(){
                             $("#svgdiv,#svgsrc").toggle()
                             resize();
@@ -80,10 +83,11 @@ function getsvg(){
                 $("#gInsertSVG").empty().append(n);
 				ace.edit("svgsrc2").setValue(str,1);
                 //ace.edit("svgsrc2").selection.clear();
-  
+				$("#infotip").attr("data-content","SVG returned in: "+d +" ms.");
               },
  			 error:function(jqXHR, textStatus, errorThrown){
- 				console.log("ajax error: "+textStatus + errorThrown);
+ 				console.log("ajax error: "+textStatus + jqXHR.responseText);
+ 				$("#infotip").attr("data-content","<pre>"+jqXHR.responseText+"</pre>");
  			}			
             });
 };
diff --git a/src/graphxq/graphxq.xqm b/src/graphxq/graphxq.xqm
index 8e1e45f..9871048 100644
--- a/src/graphxq/graphxq.xqm
+++ b/src/graphxq/graphxq.xqm
@@ -33,8 +33,8 @@ function about(){
 : GET or POST return svg for dot, with download option 
 :)
 declare 
-%rest:path("graphxq/svg")
-%rest:form-param("dot","{$dot}")
+%rest:path("graphxq/api/svg")
+%rest:form-param("data","{$dot}")
 %rest:form-param("url","{$url}")  
 %rest:form-param("dl","{$dl}")
 %output:media-type("image/svg+xml")
@@ -127,7 +127,7 @@ function library(){
 :)
 declare 
 %rest:POST %rest:path("graphxq/api/dotml")
-%rest:form-param("dotml","{$dotml}")
+%rest:form-param("data","{$dotml}")
 %rest:form-param("dl","{$dl}")
 function api-dotml($dotml,$dl ) {
  let $dotml:=fn:trace($dotml,"dot: ")
diff --git a/src/graphxq/views/api.xml b/src/graphxq/views/api.xml
index 2584a0c..5c2e138 100644
--- a/src/graphxq/views/api.xml
+++ b/src/graphxq/views/api.xml
@@ -1,7 +1,24 @@
 <div>
-    <h1>About GraphXQ API</h1>
+    <h1>The GraphXQ API</h1>
+    <p>The Graphxq REST API.</p>
+    <h2 id="dot">
+	    <span class="label label-success">POST</span>
+	    <a href="#dot">dot</a>
+    </h2>
+    <h3>Description</h3>
+    <p>Return SVG from dot passed in the <code>data</code> parameter.</p>
+    <h3>Syntax</h3>
 	<p>
-		POST or GET <code>restxq/graphxq/api/dotml?dot=..</code>
+		<code>restxq/graphxq/api/dot?data=..</code>
 	</p>
-  
+     <h2 id="dotml">
+	     <span class="label label-success">POST</span>
+	     <a href="#dotml">dotml</a>
+     </h2>
+      <h3>Description</h3>
+    <p>Return SVG from dotML passed in the <code>data</code> parameter.</p>
+    <h3>Syntax</h3>
+     <p>
+        <code>restxq/graphxq/api/dotml?data=..</code>
+    </p>
 </div>
\ No newline at end of file
diff --git a/src/graphxq/views/dotform.xml b/src/graphxq/views/dotform.xml
index a6a63fa..3180d05 100644
--- a/src/graphxq/views/dotform.xml
+++ b/src/graphxq/views/dotform.xml
@@ -5,9 +5,9 @@
 	</div>
 	<div class="row-fluid">
 		<div class="span6  " id="leftPane">		
-			<form id="editForm" action="svg" method="post" target="_new"
-				class="extend" Xstyle="overflow:hidden;height:100%">
-					<textarea id="dot" name="dot" rows="100"
+			<form id="editForm" action="api/svg" method="post" target="_new"
+				class="extend" >
+					<textarea id="data" name="data" rows="100"
 					style="width:100%;overflow:scroll;height:98%">{$dot}</textarea>
 					<input name="dl" type="checkbox" style="display:none"/>
 			</form>
diff --git a/src/graphxq/views/dotmlform.xml b/src/graphxq/views/dotmlform.xml
index ad66ed0..86e05cc 100644
--- a/src/graphxq/views/dotmlform.xml
+++ b/src/graphxq/views/dotmlform.xml
@@ -1,17 +1,22 @@
 <div>
-<div class="row-fluid" style="height:24px">
-{$toolbar}
-</div>
-<div class="row-fluid"  >
-	<div class="span6" id="leftPane" style="position:relative;height:100%">
-		<form id="editForm" method="post" action="api/dotml" target="_new" style="background-color:#EEEEEE;" class="extend">
-			<textarea name="dotml" rows="20"  style="width:100%;overflow:scroll;height:100%">{$dotml}</textarea>			
-		    <input name="dl" type="checkbox" style="display:hidden"/>
-        </form >
+	<div class="row-fluid" style="height:24px">
+		{$toolbar}
 	</div>
-	<div class="span6" id="rightPane">
-<div id="svgdiv" class="extend" style="width:100%;border: 1px solid #E3E3E3;">{$svgwidget}</div>
-        <pre style="display: none" id="svgsrc">(no svg loaded)</pre>
+	<div class="row-fluid">
+		<div class="span6" id="leftPane" style="position:relative;height:100%">
+			<form id="editForm" method="post" action="api/dotml" target="_new"
+				class="extend">
+				<textarea id="data" name="data" rows="20"
+					style="width:100%;overflow:scroll;height:98%">{$dotml}</textarea>
+				<input name="dl" type="checkbox" style="display:none" />
+			</form>
+		</div>
+		<div class="span6" id="rightPane">
+			<div id="svgdiv" class="extend"
+				style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:10em;">{$svgwidget}</div>
+			<div id="svgsrc" class="extend ace-container" style="display: none">
+				<div id="svgsrc2" class="ace ">(no svg loaded)</div>
+			</div>
+		</div>
 	</div>
-</div>
 </div>
\ No newline at end of file
diff --git a/src/graphxq/views/item1.xml b/src/graphxq/views/item1.xml
index 28af059..00bf242 100644
--- a/src/graphxq/views/item1.xml
+++ b/src/graphxq/views/item1.xml
@@ -1,5 +1,5 @@
 <li class="span4" style="height:180px;">
-    <a class="pull-left" href="{$url($item)}">
+    <a class="pull-left thumbnail" href="{$url($item)}">
         <img class="media-object" src="/graphxq/{$item/url/@type}.png" style="width:100px;height:100px"/>
        </a>
     <div class="media-body">
diff --git a/src/graphxq/views/layout.xml b/src/graphxq/views/layout.xml
index b4badd9..8c135f4 100644
--- a/src/graphxq/views/layout.xml
+++ b/src/graphxq/views/layout.xml
@@ -13,13 +13,14 @@
 
 		<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css"
 			rel="stylesheet" type="text/css" />
-		<link href="/graphxq/app.css" rel="stylesheet" type="text/css" />
+		
 		<!-- Le fav and touch icons -->
 		<link rel="shortcut icon" href="/graphxq/graphxq2.png" />
 
 		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
 		<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js" type="text/javascript"></script>
         <script src="http://raw.github.com/ajaxorg/ace-builds/master/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+        <link href="/graphxq/app.css" rel="stylesheet" type="text/css" />
         <script src="/graphxq/app.js" type="text/javascript"></script>
     <script type="text/javascript"><![CDATA[
           var _gaq = _gaq || [];
@@ -43,7 +44,7 @@
 						<span class="icon-bar"></span>
 						<span class="icon-bar"></span>
 					</a>
-					<a href="." class="brand" title="Version 0.3.0">
+					<a href="." class="brand" title="Version 0.3.1">
 						<img src="/graphxq/graphxq2.png" />
 						graphXQ
 					</a>
@@ -75,9 +76,7 @@
                          
              </div>
           </div>
-
-
-		
+        
 				</div>
 			</div>
 		</div>
diff --git a/src/graphxq/views/toolbar.xml b/src/graphxq/views/toolbar.xml
index 9d7cf69..555300d 100644
--- a/src/graphxq/views/toolbar.xml
+++ b/src/graphxq/views/toolbar.xml
@@ -1,6 +1,7 @@
 <div>
+  
 	<div class="btn-group">
-		<button id="bnup" class="btn btn-mini">
+		<button id="bnRefresh" class="btn btn-mini">
 			<i class="icon-refresh"></i>
 			Redraw
 		</button>
@@ -21,7 +22,7 @@
 	</div>
 	<!-- http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap -->
 	<div class="btn-group " data-toggle="buttons-radio">
-		<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini"
+		<a rel="tooltip" title="Show only the editor" class="btn btn-mini"
 			data-action="lDom" data-placement="left">
 			<i class="icon icon-indent-left"></i>
 		</a>
@@ -29,11 +30,14 @@
 			data-placement="left" data-action="equality">
 			<i class="icon icon-resize-horizontal"></i>
 		</a>
-		<a rel="tooltip" title="Make the right side dominant" class="btn btn-mini"
+		<a rel="tooltip" title="Show only the result" class="btn btn-mini"
 			data-placement="left" data-action="rDom">
 			<i class="icon icon-indent-right"></i>
 		</a>
 	</div>
+	<a id="infotip" data-original-title="Status from Ajax"  rel="popover" data-placement="bottom" data-content="nothing yet.">
+                 <i class="icon-info"></i> Status
+  </a>
     <div class="btn-group pull-right">
     <button id="bnsvg" class="btn btn-mini" title="Show SVG standalone.">
 			<i class="icon-fullscreen"></i>
@@ -45,7 +49,6 @@
 		</button>
     </div>
     <div class="btn-group pull-right">
-    	
     <button id="bnxml" class="btn btn-mini" data-toggle="button" title="Toggle SVG graphic and text">
 			<i class="icon-eye-close"></i>
 			SVG text