diff --git a/README.md b/README.md
index 1cd9d29..a41c117 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,25 @@
 # JavaScript Product Catalogue
 
-This repository shows how to build a Product Catalogue with JavaScript on a website, based on the Contentful starter Product Catalogue example space.
+This repository shows how to build a frontend JavaScript based application with Contentful for a Product Catalogue, based on the Contentful starter Product Catalogue example space.
 
 This project uses no specific frameworks and is written in plain JavaScript, making use of browser APIs and HTML/CSS.
 
 The application is split over multiple files which are included via script tags in the `index.html` file. While this approach is taken here for simplicity, **this is not advised for production deployments**. Make sure you always bundle up and minify your JavaScript code.
 
-The only external dependencies are the [Contentful SDK](https://github.com/contentful/contentful.js) and the [marked](https://github.com/chjj/marked) Markdown library for rendering markdown content.
+The only external dependencies are:
+* the [Contentful SDK](https://github.com/contentful/contentful.js)
+* the [marked](https://github.com/chjj/marked) Markdown library for rendering markdown content
+* the [es6-promise](https://github.com/stefanpenner/es6-promise) polyfill for Promises in the browser
 
-Feel free to look at the code and understand how to use Contentful on a bare bones, web based, JavaScript enabled website.
+## Who is this for?
+
+This application was developed in order to show a very simple way of developing a frontend JavaScript application with Contentful, without the aid of any more complex frameworks or tools.
+
+It's also focused on users who are newer to web development in general. The code is commented and explained, so even if you are not so experienced with webdevelopment you can get an understanding of what's happening in the code.
+
+If you'd like to see more complex examples you can look at the [React discovery app](https://github.com/contentful/discovery-app-react) and more will come in the future.
+
+This code makes some use of Promises, which are also used by the Contentful SDK. If you are new to promises, read [this introduction](http://www.html5rocks.com/en/tutorials/es6/promises/) and [this article](http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) to learn some more common usage patterns.
 
 ## Trying it out
 
diff --git a/app.js b/app.js
index a689405..d3cfb79 100644
--- a/app.js
+++ b/app.js
@@ -1,11 +1,22 @@
 (function () {
 
+/**
+ * Initializes the application and required dependencies, such as:
+ * - Contentful client
+ * - Configuration for the application
+ * - History API event listeners
+ * - Event delegation for handling anchor links throughout the app and allowing
+ * navigation through the use of pushState and the History API
+ */
 PC.init = function () {
+  // Initializes the Contentful client with the required credentials for a
+  // product catalog space. Feel free to replace them with our own.
   PC.contentfulClient = contentful.createClient({
     accessToken: '0e3ec801b5af550c8a1257e8623b1c77ac9b3d8fcfc1b2b7494e3cb77878f92a',
     space: 'wl1z0pal05vy'
   })
 
+  // IDs of some of the Content Types used in the app
   PC.config = {
     productContentTypeId: '2PqfXUJwE8qSYKuM0U6w8M',
     categoryContentTypeId: '6XwpTaSiiI2Ak2Ww0oi6qa'
@@ -14,46 +25,100 @@ PC.init = function () {
   setupHistory()
   setupNavAnchorListeners()
 
+  // main container for rendering the app
   PC.container = document.getElementById('content')
 
+  // load the index page
   loadPage('')
 }
 
+// Navigates to a given page via the history API
+PC.navigate = function (href) {
+  window.history.pushState({href: href}, '', href)
+  loadPage(href)
+}
+
+/**
+ * Sets up the popstate listener
+ * https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate
+ */
 function setupHistory() {
   window.onpopstate = function (ev) {
     loadPage(ev.state && ev.state.href || '')
   }
 }
 
+/**
+ * Event delegation mechanism for links throughout the app
+ *
+ * Listens to all click events in the app, and if the source element is an anchor
+ * tag and has a data-nav property, it cancels the event and loads the page
+ * referred in the href with the loadPage function, while also pushing it
+ * to the history API
+ */
 function setupNavAnchorListeners() {
   document.querySelector('body').addEventListener('click', function (ev) {
     ev.preventDefault()
     if(ev.target.tagName.toLowerCase() === 'a' && 'nav' in ev.target.dataset) {
-      history.pushState({href: ev.target.href}, '', ev.target.href)
-      loadPage(ev.target.href)
+      PC.navigate(ev.target.href)
     }
   }, false)
 }
 
+/**
+ * Basic routing mechanism
+ *
+ * Removes the URL from the href (which can come from either an anchor tag or
+ * the popstate event), and splits it by '/'.
+ */
 function loadPage(href) {
   href = href.replace(/(^http(s)?:\/\/\w+(:\d+)?\/|^\/)/, '')
   var urlParts = href.split('/')
-  switch(urlParts[0]) {
+  var pageName = urlParts[0]
+  // Attempts to get the object which contains the methods to render and setup
+  // pages, otherwise defaults to the main page
+  var page = PC.pages[pageName] || PC.pages.products
+  var loader
+  switch(pageName) {
+    // /categories and /categories/:id
     case 'categories':
-      PC.pages.categories()
+      loader = page.renderHTML({
+        selectedCategoryId: urlParts[1],
+      })
       break
+    // /about
     case 'about':
-      PC.pages.about()
+      loader = page.renderHTML()
       break
+    // /product/:id
     case 'product':
-      PC.pages.product(urlParts[1])
+      loader = page.renderHTML({
+        productSlug: urlParts[1]
+      })
       break
-    case 'brand':
-      PC.pages.brand(brand)
+    // /brand/:id
+    case 'brands':
+      loader = page.renderHTML({
+        brandId: urlParts[1]
+      })
       break
+    // / (index page)
     default:
-      PC.pages.products()
+      loader = page.renderHTML()
   }
+
+  loader.then(injectInPage).then(function () {
+    // after rendering is done, run the postRender method if there is one
+    if('postRender' in page) {
+      setTimeout(function () {
+        page.postRender()
+      }, 0)
+    }
+  })
+}
+
+function injectInPage (HTMLContent) {
+  PC.container.innerHTML = HTMLContent
 }
 
 }());
diff --git a/es6-promise.js b/es6-promise.js
new file mode 100644
index 0000000..316c8a7
--- /dev/null
+++ b/es6-promise.js
@@ -0,0 +1,959 @@
+/*!
+ * @overview es6-promise - a tiny implementation of Promises/A+.
+ * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
+ * @license   Licensed under MIT license
+ *            See https://raw.githubusercontent.com/jakearchibald/es6-promise/master/LICENSE
+ * @version   3.2.1
+ */
+
+(function() {
+    "use strict";
+    function lib$es6$promise$utils$$objectOrFunction(x) {
+      return typeof x === 'function' || (typeof x === 'object' && x !== null);
+    }
+
+    function lib$es6$promise$utils$$isFunction(x) {
+      return typeof x === 'function';
+    }
+
+    function lib$es6$promise$utils$$isMaybeThenable(x) {
+      return typeof x === 'object' && x !== null;
+    }
+
+    var lib$es6$promise$utils$$_isArray;
+    if (!Array.isArray) {
+      lib$es6$promise$utils$$_isArray = function (x) {
+        return Object.prototype.toString.call(x) === '[object Array]';
+      };
+    } else {
+      lib$es6$promise$utils$$_isArray = Array.isArray;
+    }
+
+    var lib$es6$promise$utils$$isArray = lib$es6$promise$utils$$_isArray;
+    var lib$es6$promise$asap$$len = 0;
+    var lib$es6$promise$asap$$vertxNext;
+    var lib$es6$promise$asap$$customSchedulerFn;
+
+    var lib$es6$promise$asap$$asap = function asap(callback, arg) {
+      lib$es6$promise$asap$$queue[lib$es6$promise$asap$$len] = callback;
+      lib$es6$promise$asap$$queue[lib$es6$promise$asap$$len + 1] = arg;
+      lib$es6$promise$asap$$len += 2;
+      if (lib$es6$promise$asap$$len === 2) {
+        // If len is 2, that means that we need to schedule an async flush.
+        // If additional callbacks are queued before the queue is flushed, they
+        // will be processed by this flush that we are scheduling.
+        if (lib$es6$promise$asap$$customSchedulerFn) {
+          lib$es6$promise$asap$$customSchedulerFn(lib$es6$promise$asap$$flush);
+        } else {
+          lib$es6$promise$asap$$scheduleFlush();
+        }
+      }
+    }
+
+    function lib$es6$promise$asap$$setScheduler(scheduleFn) {
+      lib$es6$promise$asap$$customSchedulerFn = scheduleFn;
+    }
+
+    function lib$es6$promise$asap$$setAsap(asapFn) {
+      lib$es6$promise$asap$$asap = asapFn;
+    }
+
+    var lib$es6$promise$asap$$browserWindow = (typeof window !== 'undefined') ? window : undefined;
+    var lib$es6$promise$asap$$browserGlobal = lib$es6$promise$asap$$browserWindow || {};
+    var lib$es6$promise$asap$$BrowserMutationObserver = lib$es6$promise$asap$$browserGlobal.MutationObserver || lib$es6$promise$asap$$browserGlobal.WebKitMutationObserver;
+    var lib$es6$promise$asap$$isNode = typeof self === 'undefined' && typeof process !== 'undefined' && {}.toString.call(process) === '[object process]';
+
+    // test for web worker but not in IE10
+    var lib$es6$promise$asap$$isWorker = typeof Uint8ClampedArray !== 'undefined' &&
+      typeof importScripts !== 'undefined' &&
+      typeof MessageChannel !== 'undefined';
+
+    // node
+    function lib$es6$promise$asap$$useNextTick() {
+      // node version 0.10.x displays a deprecation warning when nextTick is used recursively
+      // see https://github.com/cujojs/when/issues/410 for details
+      return function() {
+        process.nextTick(lib$es6$promise$asap$$flush);
+      };
+    }
+
+    // vertx
+    function lib$es6$promise$asap$$useVertxTimer() {
+      return function() {
+        lib$es6$promise$asap$$vertxNext(lib$es6$promise$asap$$flush);
+      };
+    }
+
+    function lib$es6$promise$asap$$useMutationObserver() {
+      var iterations = 0;
+      var observer = new lib$es6$promise$asap$$BrowserMutationObserver(lib$es6$promise$asap$$flush);
+      var node = document.createTextNode('');
+      observer.observe(node, { characterData: true });
+
+      return function() {
+        node.data = (iterations = ++iterations % 2);
+      };
+    }
+
+    // web worker
+    function lib$es6$promise$asap$$useMessageChannel() {
+      var channel = new MessageChannel();
+      channel.port1.onmessage = lib$es6$promise$asap$$flush;
+      return function () {
+        channel.port2.postMessage(0);
+      };
+    }
+
+    function lib$es6$promise$asap$$useSetTimeout() {
+      return function() {
+        setTimeout(lib$es6$promise$asap$$flush, 1);
+      };
+    }
+
+    var lib$es6$promise$asap$$queue = new Array(1000);
+    function lib$es6$promise$asap$$flush() {
+      for (var i = 0; i < lib$es6$promise$asap$$len; i+=2) {
+        var callback = lib$es6$promise$asap$$queue[i];
+        var arg = lib$es6$promise$asap$$queue[i+1];
+
+        callback(arg);
+
+        lib$es6$promise$asap$$queue[i] = undefined;
+        lib$es6$promise$asap$$queue[i+1] = undefined;
+      }
+
+      lib$es6$promise$asap$$len = 0;
+    }
+
+    function lib$es6$promise$asap$$attemptVertx() {
+      try {
+        var r = require;
+        var vertx = r('vertx');
+        lib$es6$promise$asap$$vertxNext = vertx.runOnLoop || vertx.runOnContext;
+        return lib$es6$promise$asap$$useVertxTimer();
+      } catch(e) {
+        return lib$es6$promise$asap$$useSetTimeout();
+      }
+    }
+
+    var lib$es6$promise$asap$$scheduleFlush;
+    // Decide what async method to use to triggering processing of queued callbacks:
+    if (lib$es6$promise$asap$$isNode) {
+      lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useNextTick();
+    } else if (lib$es6$promise$asap$$BrowserMutationObserver) {
+      lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useMutationObserver();
+    } else if (lib$es6$promise$asap$$isWorker) {
+      lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useMessageChannel();
+    } else if (lib$es6$promise$asap$$browserWindow === undefined && typeof require === 'function') {
+      lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$attemptVertx();
+    } else {
+      lib$es6$promise$asap$$scheduleFlush = lib$es6$promise$asap$$useSetTimeout();
+    }
+    function lib$es6$promise$then$$then(onFulfillment, onRejection) {
+      var parent = this;
+
+      var child = new this.constructor(lib$es6$promise$$internal$$noop);
+
+      if (child[lib$es6$promise$$internal$$PROMISE_ID] === undefined) {
+        lib$es6$promise$$internal$$makePromise(child);
+      }
+
+      var state = parent._state;
+
+      if (state) {
+        var callback = arguments[state - 1];
+        lib$es6$promise$asap$$asap(function(){
+          lib$es6$promise$$internal$$invokeCallback(state, child, callback, parent._result);
+        });
+      } else {
+        lib$es6$promise$$internal$$subscribe(parent, child, onFulfillment, onRejection);
+      }
+
+      return child;
+    }
+    var lib$es6$promise$then$$default = lib$es6$promise$then$$then;
+    function lib$es6$promise$promise$resolve$$resolve(object) {
+      /*jshint validthis:true */
+      var Constructor = this;
+
+      if (object && typeof object === 'object' && object.constructor === Constructor) {
+        return object;
+      }
+
+      var promise = new Constructor(lib$es6$promise$$internal$$noop);
+      lib$es6$promise$$internal$$resolve(promise, object);
+      return promise;
+    }
+    var lib$es6$promise$promise$resolve$$default = lib$es6$promise$promise$resolve$$resolve;
+    var lib$es6$promise$$internal$$PROMISE_ID = Math.random().toString(36).substring(16);
+
+    function lib$es6$promise$$internal$$noop() {}
+
+    var lib$es6$promise$$internal$$PENDING   = void 0;
+    var lib$es6$promise$$internal$$FULFILLED = 1;
+    var lib$es6$promise$$internal$$REJECTED  = 2;
+
+    var lib$es6$promise$$internal$$GET_THEN_ERROR = new lib$es6$promise$$internal$$ErrorObject();
+
+    function lib$es6$promise$$internal$$selfFulfillment() {
+      return new TypeError("You cannot resolve a promise with itself");
+    }
+
+    function lib$es6$promise$$internal$$cannotReturnOwn() {
+      return new TypeError('A promises callback cannot return that same promise.');
+    }
+
+    function lib$es6$promise$$internal$$getThen(promise) {
+      try {
+        return promise.then;
+      } catch(error) {
+        lib$es6$promise$$internal$$GET_THEN_ERROR.error = error;
+        return lib$es6$promise$$internal$$GET_THEN_ERROR;
+      }
+    }
+
+    function lib$es6$promise$$internal$$tryThen(then, value, fulfillmentHandler, rejectionHandler) {
+      try {
+        then.call(value, fulfillmentHandler, rejectionHandler);
+      } catch(e) {
+        return e;
+      }
+    }
+
+    function lib$es6$promise$$internal$$handleForeignThenable(promise, thenable, then) {
+       lib$es6$promise$asap$$asap(function(promise) {
+        var sealed = false;
+        var error = lib$es6$promise$$internal$$tryThen(then, thenable, function(value) {
+          if (sealed) { return; }
+          sealed = true;
+          if (thenable !== value) {
+            lib$es6$promise$$internal$$resolve(promise, value);
+          } else {
+            lib$es6$promise$$internal$$fulfill(promise, value);
+          }
+        }, function(reason) {
+          if (sealed) { return; }
+          sealed = true;
+
+          lib$es6$promise$$internal$$reject(promise, reason);
+        }, 'Settle: ' + (promise._label || ' unknown promise'));
+
+        if (!sealed && error) {
+          sealed = true;
+          lib$es6$promise$$internal$$reject(promise, error);
+        }
+      }, promise);
+    }
+
+    function lib$es6$promise$$internal$$handleOwnThenable(promise, thenable) {
+      if (thenable._state === lib$es6$promise$$internal$$FULFILLED) {
+        lib$es6$promise$$internal$$fulfill(promise, thenable._result);
+      } else if (thenable._state === lib$es6$promise$$internal$$REJECTED) {
+        lib$es6$promise$$internal$$reject(promise, thenable._result);
+      } else {
+        lib$es6$promise$$internal$$subscribe(thenable, undefined, function(value) {
+          lib$es6$promise$$internal$$resolve(promise, value);
+        }, function(reason) {
+          lib$es6$promise$$internal$$reject(promise, reason);
+        });
+      }
+    }
+
+    function lib$es6$promise$$internal$$handleMaybeThenable(promise, maybeThenable, then) {
+      if (maybeThenable.constructor === promise.constructor &&
+          then === lib$es6$promise$then$$default &&
+          constructor.resolve === lib$es6$promise$promise$resolve$$default) {
+        lib$es6$promise$$internal$$handleOwnThenable(promise, maybeThenable);
+      } else {
+        if (then === lib$es6$promise$$internal$$GET_THEN_ERROR) {
+          lib$es6$promise$$internal$$reject(promise, lib$es6$promise$$internal$$GET_THEN_ERROR.error);
+        } else if (then === undefined) {
+          lib$es6$promise$$internal$$fulfill(promise, maybeThenable);
+        } else if (lib$es6$promise$utils$$isFunction(then)) {
+          lib$es6$promise$$internal$$handleForeignThenable(promise, maybeThenable, then);
+        } else {
+          lib$es6$promise$$internal$$fulfill(promise, maybeThenable);
+        }
+      }
+    }
+
+    function lib$es6$promise$$internal$$resolve(promise, value) {
+      if (promise === value) {
+        lib$es6$promise$$internal$$reject(promise, lib$es6$promise$$internal$$selfFulfillment());
+      } else if (lib$es6$promise$utils$$objectOrFunction(value)) {
+        lib$es6$promise$$internal$$handleMaybeThenable(promise, value, lib$es6$promise$$internal$$getThen(value));
+      } else {
+        lib$es6$promise$$internal$$fulfill(promise, value);
+      }
+    }
+
+    function lib$es6$promise$$internal$$publishRejection(promise) {
+      if (promise._onerror) {
+        promise._onerror(promise._result);
+      }
+
+      lib$es6$promise$$internal$$publish(promise);
+    }
+
+    function lib$es6$promise$$internal$$fulfill(promise, value) {
+      if (promise._state !== lib$es6$promise$$internal$$PENDING) { return; }
+
+      promise._result = value;
+      promise._state = lib$es6$promise$$internal$$FULFILLED;
+
+      if (promise._subscribers.length !== 0) {
+        lib$es6$promise$asap$$asap(lib$es6$promise$$internal$$publish, promise);
+      }
+    }
+
+    function lib$es6$promise$$internal$$reject(promise, reason) {
+      if (promise._state !== lib$es6$promise$$internal$$PENDING) { return; }
+      promise._state = lib$es6$promise$$internal$$REJECTED;
+      promise._result = reason;
+
+      lib$es6$promise$asap$$asap(lib$es6$promise$$internal$$publishRejection, promise);
+    }
+
+    function lib$es6$promise$$internal$$subscribe(parent, child, onFulfillment, onRejection) {
+      var subscribers = parent._subscribers;
+      var length = subscribers.length;
+
+      parent._onerror = null;
+
+      subscribers[length] = child;
+      subscribers[length + lib$es6$promise$$internal$$FULFILLED] = onFulfillment;
+      subscribers[length + lib$es6$promise$$internal$$REJECTED]  = onRejection;
+
+      if (length === 0 && parent._state) {
+        lib$es6$promise$asap$$asap(lib$es6$promise$$internal$$publish, parent);
+      }
+    }
+
+    function lib$es6$promise$$internal$$publish(promise) {
+      var subscribers = promise._subscribers;
+      var settled = promise._state;
+
+      if (subscribers.length === 0) { return; }
+
+      var child, callback, detail = promise._result;
+
+      for (var i = 0; i < subscribers.length; i += 3) {
+        child = subscribers[i];
+        callback = subscribers[i + settled];
+
+        if (child) {
+          lib$es6$promise$$internal$$invokeCallback(settled, child, callback, detail);
+        } else {
+          callback(detail);
+        }
+      }
+
+      promise._subscribers.length = 0;
+    }
+
+    function lib$es6$promise$$internal$$ErrorObject() {
+      this.error = null;
+    }
+
+    var lib$es6$promise$$internal$$TRY_CATCH_ERROR = new lib$es6$promise$$internal$$ErrorObject();
+
+    function lib$es6$promise$$internal$$tryCatch(callback, detail) {
+      try {
+        return callback(detail);
+      } catch(e) {
+        lib$es6$promise$$internal$$TRY_CATCH_ERROR.error = e;
+        return lib$es6$promise$$internal$$TRY_CATCH_ERROR;
+      }
+    }
+
+    function lib$es6$promise$$internal$$invokeCallback(settled, promise, callback, detail) {
+      var hasCallback = lib$es6$promise$utils$$isFunction(callback),
+          value, error, succeeded, failed;
+
+      if (hasCallback) {
+        value = lib$es6$promise$$internal$$tryCatch(callback, detail);
+
+        if (value === lib$es6$promise$$internal$$TRY_CATCH_ERROR) {
+          failed = true;
+          error = value.error;
+          value = null;
+        } else {
+          succeeded = true;
+        }
+
+        if (promise === value) {
+          lib$es6$promise$$internal$$reject(promise, lib$es6$promise$$internal$$cannotReturnOwn());
+          return;
+        }
+
+      } else {
+        value = detail;
+        succeeded = true;
+      }
+
+      if (promise._state !== lib$es6$promise$$internal$$PENDING) {
+        // noop
+      } else if (hasCallback && succeeded) {
+        lib$es6$promise$$internal$$resolve(promise, value);
+      } else if (failed) {
+        lib$es6$promise$$internal$$reject(promise, error);
+      } else if (settled === lib$es6$promise$$internal$$FULFILLED) {
+        lib$es6$promise$$internal$$fulfill(promise, value);
+      } else if (settled === lib$es6$promise$$internal$$REJECTED) {
+        lib$es6$promise$$internal$$reject(promise, value);
+      }
+    }
+
+    function lib$es6$promise$$internal$$initializePromise(promise, resolver) {
+      try {
+        resolver(function resolvePromise(value){
+          lib$es6$promise$$internal$$resolve(promise, value);
+        }, function rejectPromise(reason) {
+          lib$es6$promise$$internal$$reject(promise, reason);
+        });
+      } catch(e) {
+        lib$es6$promise$$internal$$reject(promise, e);
+      }
+    }
+
+    var lib$es6$promise$$internal$$id = 0;
+    function lib$es6$promise$$internal$$nextId() {
+      return lib$es6$promise$$internal$$id++;
+    }
+
+    function lib$es6$promise$$internal$$makePromise(promise) {
+      promise[lib$es6$promise$$internal$$PROMISE_ID] = lib$es6$promise$$internal$$id++;
+      promise._state = undefined;
+      promise._result = undefined;
+      promise._subscribers = [];
+    }
+
+    function lib$es6$promise$promise$all$$all(entries) {
+      return new lib$es6$promise$enumerator$$default(this, entries).promise;
+    }
+    var lib$es6$promise$promise$all$$default = lib$es6$promise$promise$all$$all;
+    function lib$es6$promise$promise$race$$race(entries) {
+      /*jshint validthis:true */
+      var Constructor = this;
+
+      if (!lib$es6$promise$utils$$isArray(entries)) {
+        return new Constructor(function(resolve, reject) {
+          reject(new TypeError('You must pass an array to race.'));
+        });
+      } else {
+        return new Constructor(function(resolve, reject) {
+          var length = entries.length;
+          for (var i = 0; i < length; i++) {
+            Constructor.resolve(entries[i]).then(resolve, reject);
+          }
+        });
+      }
+    }
+    var lib$es6$promise$promise$race$$default = lib$es6$promise$promise$race$$race;
+    function lib$es6$promise$promise$reject$$reject(reason) {
+      /*jshint validthis:true */
+      var Constructor = this;
+      var promise = new Constructor(lib$es6$promise$$internal$$noop);
+      lib$es6$promise$$internal$$reject(promise, reason);
+      return promise;
+    }
+    var lib$es6$promise$promise$reject$$default = lib$es6$promise$promise$reject$$reject;
+
+
+    function lib$es6$promise$promise$$needsResolver() {
+      throw new TypeError('You must pass a resolver function as the first argument to the promise constructor');
+    }
+
+    function lib$es6$promise$promise$$needsNew() {
+      throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");
+    }
+
+    var lib$es6$promise$promise$$default = lib$es6$promise$promise$$Promise;
+    /**
+      Promise objects represent the eventual result of an asynchronous operation. The
+      primary way of interacting with a promise is through its `then` method, which
+      registers callbacks to receive either a promise's eventual value or the reason
+      why the promise cannot be fulfilled.
+
+      Terminology
+      -----------
+
+      - `promise` is an object or function with a `then` method whose behavior conforms to this specification.
+      - `thenable` is an object or function that defines a `then` method.
+      - `value` is any legal JavaScript value (including undefined, a thenable, or a promise).
+      - `exception` is a value that is thrown using the throw statement.
+      - `reason` is a value that indicates why a promise was rejected.
+      - `settled` the final resting state of a promise, fulfilled or rejected.
+
+      A promise can be in one of three states: pending, fulfilled, or rejected.
+
+      Promises that are fulfilled have a fulfillment value and are in the fulfilled
+      state.  Promises that are rejected have a rejection reason and are in the
+      rejected state.  A fulfillment value is never a thenable.
+
+      Promises can also be said to *resolve* a value.  If this value is also a
+      promise, then the original promise's settled state will match the value's
+      settled state.  So a promise that *resolves* a promise that rejects will
+      itself reject, and a promise that *resolves* a promise that fulfills will
+      itself fulfill.
+
+
+      Basic Usage:
+      ------------
+
+      ```js
+      var promise = new Promise(function(resolve, reject) {
+        // on success
+        resolve(value);
+
+        // on failure
+        reject(reason);
+      });
+
+      promise.then(function(value) {
+        // on fulfillment
+      }, function(reason) {
+        // on rejection
+      });
+      ```
+
+      Advanced Usage:
+      ---------------
+
+      Promises shine when abstracting away asynchronous interactions such as
+      `XMLHttpRequest`s.
+
+      ```js
+      function getJSON(url) {
+        return new Promise(function(resolve, reject){
+          var xhr = new XMLHttpRequest();
+
+          xhr.open('GET', url);
+          xhr.onreadystatechange = handler;
+          xhr.responseType = 'json';
+          xhr.setRequestHeader('Accept', 'application/json');
+          xhr.send();
+
+          function handler() {
+            if (this.readyState === this.DONE) {
+              if (this.status === 200) {
+                resolve(this.response);
+              } else {
+                reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']'));
+              }
+            }
+          };
+        });
+      }
+
+      getJSON('/posts.json').then(function(json) {
+        // on fulfillment
+      }, function(reason) {
+        // on rejection
+      });
+      ```
+
+      Unlike callbacks, promises are great composable primitives.
+
+      ```js
+      Promise.all([
+        getJSON('/posts'),
+        getJSON('/comments')
+      ]).then(function(values){
+        values[0] // => postsJSON
+        values[1] // => commentsJSON
+
+        return values;
+      });
+      ```
+
+      @class Promise
+      @param {function} resolver
+      Useful for tooling.
+      @constructor
+    */
+    function lib$es6$promise$promise$$Promise(resolver) {
+      this[lib$es6$promise$$internal$$PROMISE_ID] = lib$es6$promise$$internal$$nextId();
+      this._result = this._state = undefined;
+      this._subscribers = [];
+
+      if (lib$es6$promise$$internal$$noop !== resolver) {
+        typeof resolver !== 'function' && lib$es6$promise$promise$$needsResolver();
+        this instanceof lib$es6$promise$promise$$Promise ? lib$es6$promise$$internal$$initializePromise(this, resolver) : lib$es6$promise$promise$$needsNew();
+      }
+    }
+
+    lib$es6$promise$promise$$Promise.all = lib$es6$promise$promise$all$$default;
+    lib$es6$promise$promise$$Promise.race = lib$es6$promise$promise$race$$default;
+    lib$es6$promise$promise$$Promise.resolve = lib$es6$promise$promise$resolve$$default;
+    lib$es6$promise$promise$$Promise.reject = lib$es6$promise$promise$reject$$default;
+    lib$es6$promise$promise$$Promise._setScheduler = lib$es6$promise$asap$$setScheduler;
+    lib$es6$promise$promise$$Promise._setAsap = lib$es6$promise$asap$$setAsap;
+    lib$es6$promise$promise$$Promise._asap = lib$es6$promise$asap$$asap;
+
+    lib$es6$promise$promise$$Promise.prototype = {
+      constructor: lib$es6$promise$promise$$Promise,
+
+    /**
+      The primary way of interacting with a promise is through its `then` method,
+      which registers callbacks to receive either a promise's eventual value or the
+      reason why the promise cannot be fulfilled.
+
+      ```js
+      findUser().then(function(user){
+        // user is available
+      }, function(reason){
+        // user is unavailable, and you are given the reason why
+      });
+      ```
+
+      Chaining
+      --------
+
+      The return value of `then` is itself a promise.  This second, 'downstream'
+      promise is resolved with the return value of the first promise's fulfillment
+      or rejection handler, or rejected if the handler throws an exception.
+
+      ```js
+      findUser().then(function (user) {
+        return user.name;
+      }, function (reason) {
+        return 'default name';
+      }).then(function (userName) {
+        // If `findUser` fulfilled, `userName` will be the user's name, otherwise it
+        // will be `'default name'`
+      });
+
+      findUser().then(function (user) {
+        throw new Error('Found user, but still unhappy');
+      }, function (reason) {
+        throw new Error('`findUser` rejected and we're unhappy');
+      }).then(function (value) {
+        // never reached
+      }, function (reason) {
+        // if `findUser` fulfilled, `reason` will be 'Found user, but still unhappy'.
+        // If `findUser` rejected, `reason` will be '`findUser` rejected and we're unhappy'.
+      });
+      ```
+      If the downstream promise does not specify a rejection handler, rejection reasons will be propagated further downstream.
+
+      ```js
+      findUser().then(function (user) {
+        throw new PedagogicalException('Upstream error');
+      }).then(function (value) {
+        // never reached
+      }).then(function (value) {
+        // never reached
+      }, function (reason) {
+        // The `PedgagocialException` is propagated all the way down to here
+      });
+      ```
+
+      Assimilation
+      ------------
+
+      Sometimes the value you want to propagate to a downstream promise can only be
+      retrieved asynchronously. This can be achieved by returning a promise in the
+      fulfillment or rejection handler. The downstream promise will then be pending
+      until the returned promise is settled. This is called *assimilation*.
+
+      ```js
+      findUser().then(function (user) {
+        return findCommentsByAuthor(user);
+      }).then(function (comments) {
+        // The user's comments are now available
+      });
+      ```
+
+      If the assimliated promise rejects, then the downstream promise will also reject.
+
+      ```js
+      findUser().then(function (user) {
+        return findCommentsByAuthor(user);
+      }).then(function (comments) {
+        // If `findCommentsByAuthor` fulfills, we'll have the value here
+      }, function (reason) {
+        // If `findCommentsByAuthor` rejects, we'll have the reason here
+      });
+      ```
+
+      Simple Example
+      --------------
+
+      Synchronous Example
+
+      ```javascript
+      var result;
+
+      try {
+        result = findResult();
+        // success
+      } catch(reason) {
+        // failure
+      }
+      ```
+
+      Errback Example
+
+      ```js
+      findResult(function(result, err){
+        if (err) {
+          // failure
+        } else {
+          // success
+        }
+      });
+      ```
+
+      Promise Example;
+
+      ```javascript
+      findResult().then(function(result){
+        // success
+      }, function(reason){
+        // failure
+      });
+      ```
+
+      Advanced Example
+      --------------
+
+      Synchronous Example
+
+      ```javascript
+      var author, books;
+
+      try {
+        author = findAuthor();
+        books  = findBooksByAuthor(author);
+        // success
+      } catch(reason) {
+        // failure
+      }
+      ```
+
+      Errback Example
+
+      ```js
+
+      function foundBooks(books) {
+
+      }
+
+      function failure(reason) {
+
+      }
+
+      findAuthor(function(author, err){
+        if (err) {
+          failure(err);
+          // failure
+        } else {
+          try {
+            findBoooksByAuthor(author, function(books, err) {
+              if (err) {
+                failure(err);
+              } else {
+                try {
+                  foundBooks(books);
+                } catch(reason) {
+                  failure(reason);
+                }
+              }
+            });
+          } catch(error) {
+            failure(err);
+          }
+          // success
+        }
+      });
+      ```
+
+      Promise Example;
+
+      ```javascript
+      findAuthor().
+        then(findBooksByAuthor).
+        then(function(books){
+          // found books
+      }).catch(function(reason){
+        // something went wrong
+      });
+      ```
+
+      @method then
+      @param {Function} onFulfilled
+      @param {Function} onRejected
+      Useful for tooling.
+      @return {Promise}
+    */
+      then: lib$es6$promise$then$$default,
+
+    /**
+      `catch` is simply sugar for `then(undefined, onRejection)` which makes it the same
+      as the catch block of a try/catch statement.
+
+      ```js
+      function findAuthor(){
+        throw new Error('couldn't find that author');
+      }
+
+      // synchronous
+      try {
+        findAuthor();
+      } catch(reason) {
+        // something went wrong
+      }
+
+      // async with promises
+      findAuthor().catch(function(reason){
+        // something went wrong
+      });
+      ```
+
+      @method catch
+      @param {Function} onRejection
+      Useful for tooling.
+      @return {Promise}
+    */
+      'catch': function(onRejection) {
+        return this.then(null, onRejection);
+      }
+    };
+    var lib$es6$promise$enumerator$$default = lib$es6$promise$enumerator$$Enumerator;
+    function lib$es6$promise$enumerator$$Enumerator(Constructor, input) {
+      this._instanceConstructor = Constructor;
+      this.promise = new Constructor(lib$es6$promise$$internal$$noop);
+
+      if (!this.promise[lib$es6$promise$$internal$$PROMISE_ID]) {
+        lib$es6$promise$$internal$$makePromise(this.promise);
+      }
+
+      if (Array.isArray(input)) {
+        this._input     = input;
+        this.length     = input.length;
+        this._remaining = input.length;
+
+        this._result = new Array(this.length);
+
+        if (this.length === 0) {
+          lib$es6$promise$$internal$$fulfill(this.promise, this._result);
+        } else {
+          this.length = this.length || 0;
+          this._enumerate();
+          if (this._remaining === 0) {
+            lib$es6$promise$$internal$$fulfill(this.promise, this._result);
+          }
+        }
+      } else {
+        lib$es6$promise$$internal$$reject(this.promise, lib$es6$promise$enumerator$$validationError());
+      }
+    }
+
+    function lib$es6$promise$enumerator$$validationError() {
+      return new Error('Array Methods must be provided an Array');
+    }
+
+    lib$es6$promise$enumerator$$Enumerator.prototype._enumerate = function() {
+      var length  = this.length;
+      var input   = this._input;
+
+      for (var i = 0; this._state === lib$es6$promise$$internal$$PENDING && i < length; i++) {
+        this._eachEntry(input[i], i);
+      }
+    };
+
+    lib$es6$promise$enumerator$$Enumerator.prototype._eachEntry = function(entry, i) {
+      var c = this._instanceConstructor;
+      var resolve = c.resolve;
+
+      if (resolve === lib$es6$promise$promise$resolve$$default) {
+        var then = lib$es6$promise$$internal$$getThen(entry);
+
+        if (then === lib$es6$promise$then$$default &&
+            entry._state !== lib$es6$promise$$internal$$PENDING) {
+          this._settledAt(entry._state, i, entry._result);
+        } else if (typeof then !== 'function') {
+          this._remaining--;
+          this._result[i] = entry;
+        } else if (c === lib$es6$promise$promise$$default) {
+          var promise = new c(lib$es6$promise$$internal$$noop);
+          lib$es6$promise$$internal$$handleMaybeThenable(promise, entry, then);
+          this._willSettleAt(promise, i);
+        } else {
+          this._willSettleAt(new c(function(resolve) { resolve(entry); }), i);
+        }
+      } else {
+        this._willSettleAt(resolve(entry), i);
+      }
+    };
+
+    lib$es6$promise$enumerator$$Enumerator.prototype._settledAt = function(state, i, value) {
+      var promise = this.promise;
+
+      if (promise._state === lib$es6$promise$$internal$$PENDING) {
+        this._remaining--;
+
+        if (state === lib$es6$promise$$internal$$REJECTED) {
+          lib$es6$promise$$internal$$reject(promise, value);
+        } else {
+          this._result[i] = value;
+        }
+      }
+
+      if (this._remaining === 0) {
+        lib$es6$promise$$internal$$fulfill(promise, this._result);
+      }
+    };
+
+    lib$es6$promise$enumerator$$Enumerator.prototype._willSettleAt = function(promise, i) {
+      var enumerator = this;
+
+      lib$es6$promise$$internal$$subscribe(promise, undefined, function(value) {
+        enumerator._settledAt(lib$es6$promise$$internal$$FULFILLED, i, value);
+      }, function(reason) {
+        enumerator._settledAt(lib$es6$promise$$internal$$REJECTED, i, reason);
+      });
+    };
+    function lib$es6$promise$polyfill$$polyfill() {
+      var local;
+
+      if (typeof global !== 'undefined') {
+          local = global;
+      } else if (typeof self !== 'undefined') {
+          local = self;
+      } else {
+          try {
+              local = Function('return this')();
+          } catch (e) {
+              throw new Error('polyfill failed because global object is unavailable in this environment');
+          }
+      }
+
+      var P = local.Promise;
+
+      if (P && Object.prototype.toString.call(P.resolve()) === '[object Promise]' && !P.cast) {
+        return;
+      }
+
+      local.Promise = lib$es6$promise$promise$$default;
+    }
+    var lib$es6$promise$polyfill$$default = lib$es6$promise$polyfill$$polyfill;
+
+    var lib$es6$promise$umd$$ES6Promise = {
+      'Promise': lib$es6$promise$promise$$default,
+      'polyfill': lib$es6$promise$polyfill$$default
+    };
+
+    /* global define:true module:true window: true */
+    if (typeof define === 'function' && define['amd']) {
+      define(function() { return lib$es6$promise$umd$$ES6Promise; });
+    } else if (typeof module !== 'undefined' && module['exports']) {
+      module['exports'] = lib$es6$promise$umd$$ES6Promise;
+    } else if (typeof this !== 'undefined') {
+      this['ES6Promise'] = lib$es6$promise$umd$$ES6Promise;
+    }
+
+    lib$es6$promise$polyfill$$default();
+}).call(this);
+
diff --git a/index.html b/index.html
index aae3cf4..0173354 100644
--- a/index.html
+++ b/index.html
@@ -18,17 +18,22 @@
       </div>
     </main>
     <script>
+      // Global PC object which contains app related code and data
       window.PC = {
+        // each page is rendered by a method contained in this object
+        // and declared in the files inside of pages/
         pages: {},
         utils: {}
       }
     </script>
-    <script src="https://npmcdn.com/contentful@3.3.5/browser-dist/contentful.min.js" charset="utf-8"></script>
+    <script src="./es6-promise.js" charset="utf-8"></script>
+    <script src="https://npmcdn.com/contentful@3.3.5/browser-dist/contentful.js" charset="utf-8"></script>
     <script src="https://npmcdn.com/marked@0.3.5/marked.min.js" charset="utf-8"></script>
     <script src="./utils.js" charset="utf-8"></script>
     <script src="./app.js" charset="utf-8"></script>
     <script src="./pages/products.js" charset="utf-8"></script>
     <script src="./pages/product.js" charset="utf-8"></script>
+    <script src="./pages/brand.js" charset="utf-8"></script>
     <script src="./pages/categories.js" charset="utf-8"></script>
     <script src="./pages/about.js" charset="utf-8"></script>
     <script>
diff --git a/pages/about.js b/pages/about.js
index b0ea4e1..6a2caa4 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,7 +1,43 @@
 (function () {
 
-PC.pages.about = function () {
-  PC.container.innerHTML = 'about'
+PC.pages.about = {}
+
+PC.pages.about.renderHTML = function (params) {
+  return Promise.resolve(
+    '<div>' +
+      '<p><a href="https://contentful.com">Contentful</a> is a content management platform for web applications, mobile apps and connected devices.</p>'+
+      '<p>It allows you to create, edit & manage content in the cloud and publish it anywhere via a powerful API.</p>'+
+      '<p>This Product Catalogue demo app uses the Content Model of our Product Space Template.</p>'+
+      '<p>If you want to try it with your own space, please access the <a href="https://app.contentful.com">Contentful Web App</a>, create a new space, load it with the Product Template and keep the same “Content Model”.'+
+      '<form id="aboutForm">'+
+        '<p>Space ID: <input id="spaceId" type="text" /></p>'+
+        '<p>Access Token: <input id="accessToken" type="text" /></p>'+
+        '<p><button>Load Space</button></p>'+
+      '</form>'+
+    '</div>'
+  )
+}
+
+PC.pages.about.postRender = function () {
+  document.getElementById('aboutForm').addEventListener('submit', submitForm, false)
+  document.querySelector('#aboutForm button').addEventListener('click', submitForm, false)
+}
+
+function submitForm(ev) {
+  ev.preventDefault()
+  var accessToken = document.getElementById('accessToken').value
+  var spaceId = document.getElementById('spaceId').value
+  if(accessToken && spaceId) {
+    reloadClient(accessToken, spaceId)
+    PC.navigate('')
+  }
+}
+
+function reloadClient (accessToken, spaceId) {
+  PC.contentfulClient = contentful.createClient({
+    accessToken: accessToken,
+    space: spaceId
+  })
 }
 
 }());
diff --git a/pages/brand.js b/pages/brand.js
new file mode 100644
index 0000000..16b371d
--- /dev/null
+++ b/pages/brand.js
@@ -0,0 +1,41 @@
+(function () {
+
+PC.pages.brand = {}
+
+/**
+ * Renders the individual brand page
+ */
+
+PC.pages.brand.renderHTML = function (params) {
+  return PC.contentfulClient.getEntries({
+    'sys.id': params.brandId
+  })
+  .then(function (entries) {
+    return renderSingleBrand(entries.items[0])
+  })
+}
+
+function renderSingleBrand(brand) {
+  var fields = brand.fields
+  return '<div>' +
+    '<h2>' + fields.companyName+ '</h2>' +
+    '<div>' +
+      renderImage(fields.logo) +
+    '</div>' +
+    '<p>' + marked(fields.companyDescription) + '</p>' +
+    (fields.website ? '<p><a href="' + fields.website + '">' + fields.website + '</a></p>' : '') +
+    (fields.twitter ? '<p><a href="' + fields.twitter + '">' + fields.twitter + '</a></p>' : '') +
+    (fields.email ? '<p><a href="mailto:' + fields.email + '">' + fields.email + '</a></p>' : '') +
+    (fields.phone ? '<p><a href="tel:' + fields.phone + '">' + fields.phone + '</a></p>' : '') +
+  '</div>'
+}
+
+function renderImage(image) {
+  if(image && image.fields.file) {
+    return '<img src="' + image.fields.file.url + '" />'
+  } else {
+    return ''
+  }
+}
+
+}());
diff --git a/pages/categories.js b/pages/categories.js
index 72e46c1..6fe34cc 100644
--- a/pages/categories.js
+++ b/pages/categories.js
@@ -1,15 +1,48 @@
 (function () {
 
-PC.pages.categories = function () {
-  PC.contentfulClient.getEntries({
+PC.pages.categories = {}
+
+/**
+ * Renders the categories list page
+ *
+ * The categories list first gets a list of all existing categories,
+ * then uses the products page method to render that same code but only
+ * with products from the selected category.
+ * If no selected category exists, the first from the list is used.
+ */
+PC.pages.categories.renderHTML = function (params) {
+  return PC.contentfulClient.getEntries({
     content_type: PC.config.categoryContentTypeId
   })
   .then(function (entries) {
-    var categories = entries.items.map(function (entry) {
-      return '<p>'+entry.fields.title+'</p>'
+    var selectedCategoryId
+    if(params.selectedCategoryId) {
+      selectedCategoryId = params.selectedCategoryId
+    } else {
+      selectedCategoryId = entries.items[0].sys.id
+    }
+    return PC.pages.products.renderHTML({categoryId: selectedCategoryId})
+    .then(function (productsHTML) {
+      return renderCategoryListPage(entries.items, productsHTML)
     })
-    PC.container.innerHTML = categories.join('\n')
   })
 }
 
+function renderCategoryListPage(categories, productsHTML) {
+  return '<div>' +
+      '<div>' + renderCategoryList(categories) + '</div>' +
+      '<div>' + productsHTML + '</div>' +
+    '</div>'
+}
+
+function renderCategoryList(categories) {
+  return categories.map(function (category) {
+    var fields = category.fields
+    return '<div>' +
+      '<img src="' + fields.icon.fields.file.url + '" width="15" height="15" alt="' + fields.categoryDescription + '" title="' + fields.categoryDescription + '" />' +
+      '<h1><a href="/categories/' + category.sys.id + '" data-nav>' + fields.title + '</a></h1>' +
+      '</div>'
+  }).join('\n')
+}
+
 }());
diff --git a/pages/product.js b/pages/product.js
index 80fed03..611e38e 100644
--- a/pages/product.js
+++ b/pages/product.js
@@ -1,32 +1,38 @@
 (function () {
 
-PC.pages.product = function (slug) {
-  PC.contentfulClient.getEntries({
+PC.pages.product = {}
+
+/**
+ * Renders the individual product page
+ */
+
+PC.pages.product.renderHTML = function (params) {
+  return PC.contentfulClient.getEntries({
     content_type: PC.config.productContentTypeId,
-    'fields.slug': slug
+    'fields.slug': params.productSlug
   })
   .then(function (entries) {
-    PC.container.innerHTML = renderSingleProduct(entries.items[0])
+    return renderSingleProduct(entries.items[0])
   })
 }
 
 function renderSingleProduct(product) {
   var fields = product.fields
   return '<div>' +
-    '<div>' +
-      renderImage(fields.image[0]) +
-    '</div>' +
     '<div>' +
       '<h2>' + fields.productName + '</h2>' +
       ' by ' +
-      '<a href="/brands/' + fields.brand.sys.id + '" data-nav>' + fields.brand.fields.companyName + '</a>'
+      '<a href="/brands/' + fields.brand.sys.id + '" data-nav>' + fields.brand.fields.companyName + '</a>' +
+    '</div>' +
+    '<div>' +
+      renderImage(fields.image[0]) +
     '</div>' +
     '<p>' +
     fields.categories.map(function (category) {
       return category.fields.title
     }).join(', ') +
     '</p>' +
-    '<p>' + PC.utils.truncate(fields.productDescription, 100) + '</p>' +
+    '<p>' + marked(fields.productDescription) + '</p>' +
     '<p>' + fields.price + ' &euro;</p>' +
     '<p>Tags: ' + fields.tags.join(', ')+ '</p>' +
   '</div>'
diff --git a/pages/products.js b/pages/products.js
index 443c9f6..ea881aa 100644
--- a/pages/products.js
+++ b/pages/products.js
@@ -1,11 +1,28 @@
 (function () {
 
-PC.pages.products = function () {
-  PC.contentfulClient.getEntries({
+PC.pages.products = {}
+
+/**
+ * Renders the products list page
+ *
+ * The products list page can optionally be filtered by a category, and will
+ * then only show products from that category. This is only used from the
+ * categories page, in order to render lists of products with only products
+ * from a selected category.
+ */
+
+PC.pages.products.renderHTML = function (params) {
+  var query = {
     content_type: PC.config.productContentTypeId
-  })
+  }
+
+  if (params && params.categoryId) {
+    query['fields.categories.sys.id[in]'] = params.categoryId
+  }
+
+  return PC.contentfulClient.getEntries(query)
   .then(function (entries) {
-    PC.container.innerHTML = renderProducts(entries.items)
+    return renderProducts(entries.items)
   })
 }
 
@@ -35,7 +52,7 @@ function renderSingleProduct(product) {
       return category.fields.title
     }).join(', ') +
     '</p>' +
-    '<p>' + PC.utils.truncate(fields.productDescription, 100) + '</p>' +
+    '<p>' + PC.utils.truncate(marked(fields.productDescription), 100) + '</p>' +
     '<p>' + fields.price + ' &euro;</p>' +
     '<p>Tags: ' + fields.tags.join(', ')+ '</p>' +
   '</div>'