diff --git a/app/templates/gulpfile.js b/app/templates/gulpfile.js
index 8e790bea..0f4fd33b 100644
--- a/app/templates/gulpfile.js
+++ b/app/templates/gulpfile.js
@@ -24,7 +24,7 @@ var options = {
 };
 
 gulp.task('jshint', function() {
-  gulp.src('ui/app/**/*.js')
+  gulp.src(['ui/app/**/*.js', '!ui/app/bower_components/**/*.js', '!ui/app/scripts/vendor/**/*.js'])
     .pipe(jshint())
     .pipe(jshint.reporter('default'));
 });
@@ -38,7 +38,7 @@ gulp.task('less', function() {
 
 // Concatenate & Minify JS
 gulp.task('scripts', function() {
-  return gulp.src('./ui/app/**/*.js')
+  return gulp.src(['./ui/app/**/*.js', '!ui/app/bower_components/**/*.js', '!ui/app/scripts/vendor/**/*.js'])
     .pipe(concat('all.js'))
     .pipe(gulp.dest('dist'))
     .pipe(rename('all.min.js'))
@@ -77,7 +77,7 @@ gulp.task('server', function() {
   var app = connect()
     .use(connect.static('ui/app'))
     .use('/v1', proxy(url.parse('http://' + options.mlHost + ':' + options.mlPort + '/v1')));
-  http.createServer(app).listen(options.appPort, 'localhost');
+  http.createServer(app).listen(options.appPort);
 });
 
 // Default Task
diff --git a/app/templates/ui/app/common/services/mlrest.js b/app/templates/ui/app/common/services/mlrest.js
index ef2e8651..16adc995 100644
--- a/app/templates/ui/app/common/services/mlrest.js
+++ b/app/templates/ui/app/common/services/mlrest.js
@@ -147,15 +147,19 @@
           createSearchContext: function(options) {
             return new SearchContext(options, $q, $http);
           },
-          getDocument: function(uri) {
+          getDocument: function(uri, options) {
             var d = $q.defer();
+            if (options === undefined || options === null) {
+              options = {};
+            }
+            angular.extend(options, {
+              format: 'json',
+              uri: uri
+            });
             $http.get(
               '/v1/documents',
               {
-                params: {
-                  format: 'json',
-                  uri: uri
-                }
+                params: options
               })
             .success(
               function(data) {
diff --git a/app/templates/ui/app/detail/detail-ctrl.js b/app/templates/ui/app/detail/detail-ctrl.js
index 3ab73c78..dd8fe157 100644
--- a/app/templates/ui/app/detail/detail-ctrl.js
+++ b/app/templates/ui/app/detail/detail-ctrl.js
@@ -9,8 +9,9 @@
         detail: {}
       };
 
-      mlRest.getDocument(uri, { format: 'json' }).then(function(data) {
+      mlRest.getDocument(uri, { transform: 'detail' }).then(function(data) {
         model.detail = data;
+        var z=0;
       });
 
       angular.extend($scope, {
diff --git a/app/templates/ui/app/detail/detail.html b/app/templates/ui/app/detail/detail.html
index 29282372..abb2336a 100644
--- a/app/templates/ui/app/detail/detail.html
+++ b/app/templates/ui/app/detail/detail.html
@@ -1,86 +1,4 @@
-<div class="row detail">
-  <h2 class="col-md-12">{{model.demo.name}}</h2>
-  <editable class="desc col-md-12" enabled="model.user.authenticated" edit-model="model.demo.description" edit-type="textarea" save="saveField('description', model.demo.description)"/>
-  <div class="col-md-12">
-    <label>Hosted at</label>
-    <a ng-href="{{model.demo.host}}">{{model.demo.host}}</a>
-    (<editable class="host-type" enabled="model.user.authenticated" edit-model="model.demo.hostType" edit-type="text" save="saveField('hostType', model.demo.hostType)"/>)
-  </div>
-  <div class="credentials col-md-12">
-    <label>Credentials</label>
-    <editable enabled="model.user.authenticated" edit-model="model.demo.username" edit-type="text" save="saveField('username', model.demo.username)"/>
-    /
-    <editable enabled="model.user.authenticated" edit-model="model.demo.password" edit-type="text" save="saveField('password', model.demo.password)"/>
-  </div>
-  <div class="browsers col-md-12">
-    <label>Browsers</label>
-    <ul>
-      <li ng-repeat="browser in model.demo.browsers">{{browser}}</li>
-    </ul>
-  </div>
-  <features enabled="model.user.authenticated" edit-features="model.demo.features" feature-choices="model.featureChoices"
-            edit-type="inline" mode="view" save="saveField('features', model.demo.features)"/>
-  <div class="repo col-md-12">
-    <label>Code repo</label>
-    <editable enabled="model.user.authenticated" edit-model="model.demo.repo" edit-type="text" save="saveField('repo', model.demo.repo)"/>
-  </div>
-  <div class="maintainer col-md-12">
-    <label>Maintainer</label>
-    <editable enabled="model.user.authenticated" edit-model="model.demo.maintainer" edit-type="text" save="saveField('maintainer', model.demo.maintainer)"/>
-    (<a ng-href="mailto:{{model.demo.email}}">{{model.demo.email}}</a>)
-  </div>
-  <div class="version col-md-12">
-    <label>MarkLogic version</label>
-    <editable enabled="model.user.authenticated" edit-model="model.demo.version" edit-type="text" save="saveField('version', model.demo.version)"/>
-  </div>
-  <div class="open-bugs col-md-12">
-    <label>Open Bugs</label>
-    <button class="btn btn-primary" ng-show="model.user.authenticated && !showBugForm" ng-click="showBugForm = true">Add</button>
-    <form ng-show="model.user.authenticated && showBugForm">
-      <fieldset class="col-md-12">
-        <label class="col-md-2">Bug description</label>
-        <textarea ng-model="model.additionalBug.msg" name="bugDescription" required></textarea>
-      </fieldset>
-      <fieldset class="col-md-12">
-        <label class="col-md-2">Browser</label>
-        <select ng-model="model.additionalBug.browser" name="bugBrowser" required>
-          <option ng-repeat="browser in model.browserChoices" value="{{browser}}">{{browser}}</option>
-        </select>
-      </fieldset>
-      <div class="col-md-12">
-        <a class="col-md-3" href="#" ng-click="showBugForm = false">Cancel</a>
-        <button class="btn btn-primary" ng-click="addBug(model.additionalBug)">Add</button>
-      </div>
-    </form>
-    <div class="bug col-md-12" ng-repeat="bug in model.demo.bugs | filter: { status: 'open' }: true | orderBy:'-dateTime'" ng-controller="BugCtrl" data-id="{{bug.id}}">
-      <div>{{bug.msg}}</div>
-      <ul class="bug-meta">
-        <li class="bug-status">Status: <editable enabled="model.user.authenticated" edit-model="bug.status" edit-type="select" edit-options="model.bugStatuses" /></li>
-        <li class="bug-dateTime">Created by {{bug.username}} on {{bug.dateTime}}</li>
-        <li class="bug-browser">Browser: {{bug.browser}}</li>
-      </ul>
-    </div>
-  </div>
-  <div class="closed-bugs col-md-12">
-    <label>Closed Bugs</label>
-    <a href="#" ng-show="!showClosedBugs" ng-click="showClosedBugs = true">Expand</a>
-    <a href="#" ng-show="showClosedBugs" ng-click="showClosedBugs = false">Collapse</a>
-    <div class="bug col-md-12" ng-show="showClosedBugs" ng-repeat="bug in model.demo.bugs | filter: { status: 'closed' }: true | orderBy:'-dateTime'" ng-controller="BugCtrl" data-id="{{bug.id}}">
-      <div>{{bug.msg}}</div>
-      <ul class="bug-meta">
-        <li class="bug-status">Status: <editable enabled="model.user.authenticated" edit-model="bug.status" edit-type="select" edit-options="model.bugStatuses" /></li>
-        <li class="bug-dateTime">Created by {{bug.username}} on {{bug.dateTime}}</li>
-        <li class="bug-browser">Browser: {{bug.browser}}</li>
-      </ul>
-    </div>
-  </div>
-  <section class="comments col-md-12">
-    <h3>Comments</h3>
-    <add-comment add-model="model.additionalComment.msg" authenticated="model.user.authenticated" save="addComment(model.additionalComment)"></add-comment>
-    <article class="comment" ng-repeat="comment in model.demo.comments | orderBy:'-dateTime'" data-id="{{comment.id}}">
-      <h4>Comment by {{comment.username}}</h4>
-      <p class="dateTime">on {{comment.dateTime}}</p>
-      {{comment.msg}}
-    </article>
-  </section>
-</div>
+<!--div class="container-fluid" ng-controller="DetailCtrl"-->
+	<!--div ng-bind="model.detail"></div-->
+	<div class="details" compile="model.detail"></div>
+<!--/div-->
diff --git a/app/templates/ui/app/index.html b/app/templates/ui/app/index.html
index ccb11fb0..28722e6e 100644
--- a/app/templates/ui/app/index.html
+++ b/app/templates/ui/app/index.html
@@ -60,6 +60,7 @@
     <script src="common/common.js"></script>
     <script src="common/services/mlrest.js"></script>
     <script src="scripts/controllers/create.js"></script>
+    <script src="scripts/directives/compile.js"></script>
     <!-- endbuild -->
   </body>
 </html>
diff --git a/app/templates/ui/app/scripts/app.js b/app/templates/ui/app/scripts/app.js
index d7483c3e..5c3449b8 100644
--- a/app/templates/ui/app/scripts/app.js
+++ b/app/templates/ui/app/scripts/app.js
@@ -1,5 +1,5 @@
 
-angular.module('sample', ['ngRoute', 'ngCkeditor', 'sample.search', 'sample.common',, 'sample.detail', 'ui.bootstrap'])
+angular.module('sample', ['ngRoute', 'ngCkeditor', 'sample.search', 'sample.common', 'sample.detail', 'ui.bootstrap', 'compile'])
   .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
 
     'use strict';
diff --git a/app/templates/ui/app/scripts/directives/compile.js b/app/templates/ui/app/scripts/directives/compile.js
new file mode 100644
index 00000000..3ca20974
--- /dev/null
+++ b/app/templates/ui/app/scripts/directives/compile.js
@@ -0,0 +1,28 @@
+// Copied from https://docs.angularjs.org/api/ng/service/$compile
+angular.module('compile', [], function($compileProvider) {
+  'use strict';
+  // configure new 'compile' directive by passing a directive
+  // factory function. The factory function injects the '$compile'
+  $compileProvider.directive('compile', function($compile) {
+    // directive factory creates a link function
+    return function(scope, element, attrs) {
+      scope.$watch(
+        function(scope) {
+           // watch the 'compile' expression for changes
+          return scope.$eval(attrs.compile);
+        },
+        function(value) {
+          // when the 'compile' expression changes
+          // assign it into the current DOM
+          element.html(value);
+
+          // compile the new DOM and link it to the current
+          // scope.
+          // NOTE: we only compile .childNodes so that
+          // we don't get into infinite loop compiling ourselves
+          $compile(element.contents())(scope);
+        }
+      );
+    };
+  });
+});
diff --git a/rest-api/transforms/detail.xslt b/rest-api/transforms/detail.xslt
new file mode 100644
index 00000000..4e68e69b
--- /dev/null
+++ b/rest-api/transforms/detail.xslt
@@ -0,0 +1,66 @@
+
+<!--
+REST API transforms managed by Roxy must follow these conventions:
+
+1. Their filenames must reflect the name of the transform.
+
+For example, an XSL transform named add-attr must be contained in a file named add-attr.xslt.
+
+2. Must annotate the file with the transform parameters in an XML comment:
+
+%roxy:params("uri=xs:string", "priority=xs:int")
+-->
+
+<!-- %roxy:params("uri=xs:string", "priority=xs:int") -->
+<xsl:stylesheet version="2.0"
+                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:map="http://marklogic.com/xdmp/map"
+                xmlns:xdmp="http://marklogic.com/xdmp"
+                xmlns:xhtml="http://www.w3.org/1999/xhtml"
+                extension-element-prefixes="xdmp"
+                exclude-result-prefixes="#all">
+
+    <xsl:param name="context" as="map:map"/>
+    <xsl:param name="params" as="map:map"/>
+
+    <xsl:template match="/">
+      <div class="details">
+        <a class="btn btn-primary btn-sm pull-right" ng-href="/">
+          Return to <span class="glyphicon glyphicon-search"></span>
+        </a>
+        <button class="btn btn-primary btn-sm pull-right" ng-click="model.showSource = true" ng-hide="model.showSource">
+          Show source
+        </button>
+        <button class="btn btn-primary btn-sm pull-right" ng-click="model.showSource = false" ng-show="model.showSource">
+          Hide source
+        </button>
+        <h2><xsl:value-of select=".//title"/></h2>
+
+        <div ng-hide="model.showSource">
+          <xsl:apply-templates />
+        </div>
+        <div hljs="" ng-show="model.showSource">
+          <xsl:sequence select="*"/>
+        </div>
+      </div>
+    </xsl:template>
+
+    <xsl:template match="xhtml:table">
+      <xsl:copy-of select="."/>
+    </xsl:template>
+
+    <xsl:template match="grouped-table">
+      <div class="grouped">
+        <xsl:apply-templates />
+      </div>
+    </xsl:template>
+
+    <xsl:template match="*[not(*)][normalize-space(string(.)) != '']">
+      <li class="detail">
+        <label><xsl:value-of select="local-name()"/>: </label>
+        <span><xsl:value-of select="."/></span>
+      </li>
+    </xsl:template>
+
+
+</xsl:stylesheet>