diff --git a/doc/13-Web-Components-Tile-Renderer.md b/doc/13-Web-Components-Tile-Renderer.md
new file mode 100644
index 0000000..d362f33
--- /dev/null
+++ b/doc/13-Web-Components-Tile-Renderer.md
@@ -0,0 +1,23 @@
+Web Components: Tile Renderer
+======================================================================
+
+The default Business Process *Renderer* is the *Tile Renderer*. It always shows
+one level of your tree, enriched with badges giving some hint on lower level
+node problems. This is what it looks like:
+
+
+
+Please click on *Tree* below the [breadcrumb](12-Web-Components-Breadcrumb.md)
+to switch to the [Tree View](14-Web-Components-Tree-Renderer.md). In the left
+corner of every *Tile* you can find two icons, both of them will show the related
+sub-process. On your mobile phone this usually replaces your current view, please
+use the [breadcrumb](12-Web-Components-Breadcrumb.md) to navigate back to a higher
+level.
+
+On a Notebook or Desktop Computer this usually leady to a split-screen view:
+
+
+
+This example shows a subtree shown with the [Tree Renderer](14-Web-Components-Tree-Renderer.md),
+it is of course also perfectly legal to drill down using the *Tile Renderer*
+only.
diff --git a/doc/14-Web-Components-Tree-Renderer.md b/doc/14-Web-Components-Tree-Renderer.md
new file mode 100644
index 0000000..7bf2137
--- /dev/null
+++ b/doc/14-Web-Components-Tree-Renderer.md
@@ -0,0 +1,14 @@
+Web Components: Tree Renderer
+======================================================================
+
+The main advantage of the *Tree Renderer* is that it is able to show all nodes
+of Business Process trees at once. This works fine even for huge trees with lots
+of nodes. Please have a look at this screenshot to get an idea of how the tree
+view looks like:
+
+
+
+Clicking Business Process Nodes collapses or unfolds them, clicking single hosts
+or services show the related monitored object. You can of course always switch
+back to the [Tile Renderer](13-Web-Components-Tile-Renderer.md) with a single
+click at any time.
diff --git a/doc/screenshot/13_web-components-tile-renderer/1301_tile-view.png b/doc/screenshot/13_web-components-tile-renderer/1301_tile-view.png
new file mode 100644
index 0000000..ffd63df
Binary files /dev/null and b/doc/screenshot/13_web-components-tile-renderer/1301_tile-view.png differ
diff --git a/doc/screenshot/13_web-components-tile-renderer/1302_tile-and-subtree.png b/doc/screenshot/13_web-components-tile-renderer/1302_tile-and-subtree.png
new file mode 100644
index 0000000..d411524
Binary files /dev/null and b/doc/screenshot/13_web-components-tile-renderer/1302_tile-and-subtree.png differ
diff --git a/doc/screenshot/14_web-components-tree-renderer/1401_tree-view.png b/doc/screenshot/14_web-components-tree-renderer/1401_tree-view.png
new file mode 100644
index 0000000..c1022bf
Binary files /dev/null and b/doc/screenshot/14_web-components-tree-renderer/1401_tree-view.png differ