diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
new file mode 100644
index 0000000..07eb1a1
--- /dev/null
+++ b/source/screens/demo/examples/intro.njk
@@ -0,0 +1,149 @@
+---
+title: Intro
+tags: 
+  - demoExample
+---
+
+{% set pageId = "init" %}
+{% set pageClass = "html_ui" %}
+
+{% extends "demo/_app.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+{% block title %}
+	{{ title }}
+{% endblock %}
+
+{% block links %}
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<div id="loader" class="step op_show">
+		<div id="bar">
+			<div id="spinner">
+				<span>I</span>
+			</div>
+			<div id="wrap">
+				<div id="progress"></div>
+			</div>
+			<div id="status">0%</div>
+		</div>
+	</div>
+	<div id="intro" class="step op_hide">
+		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+			<p>Hold
+				<kbd>space</kbd>
+				to skip.</p>
+		</div>
+		{{ ph.brand('brand') }}
+		<p>Powered by</p>
+		<ul class="tech-stack">
+			<li>Vendor</li>
+			<li>IDE</li>
+			<li>Engine</li>
+		</ul>
+	</div>
+	<div id="agreement" class="step op_hide">
+		<h1>Agreement</h1>
+		<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
+	</div>
+	<div id="idle" class="step op_hide">
+		<div class="mouse_over"></div>
+		<div class="hello">Hello World!</div>
+		<p class="hello">Only left mouse click or any key</p>
+	</div>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script>
+		//let intro = new Intro('Intro');
+		//intro.init();
+
+		//const ui = new UI();
+		//ui
+		//  .init()
+		//  .then(() => ui.showIntro())
+		//  .then(() => ui.showHint())
+		//  .then(() => ui.showIdle())
+		//  .catch((error) => console.error(error));
+
+		let introDelay = 6;
+		let hintDelay = 1;
+		let cycleDelay = 2;
+		let isAgree = false;
+		const steps = {
+			agreement: {
+				element: document.getElementById('agreement'),
+				msgIn: 'Agreement shown.',
+				msgOut: 'Agreement accepted.',
+				msgNo: 'No agreement today.'
+			}
+		};
+		const intro = document.getElementById('intro');
+		const agreement = steps.agreement.element;
+		const hint = {
+			element: document.getElementById('hint'),
+			delay: hintDelay * 1000,
+			show() {
+				if (typeof this.timeoutId === 'number') {
+					this.cancel();
+				}
+				this
+					.element
+					.classList
+					.remove('di_none');
+				this.timeoutId = setTimeout(() => {
+					this.dismiss();
+				}, this.delay);
+			},
+			dismiss() {
+				this
+					.element
+					.classList
+					.add('di_none');
+				this.timeoutId = undefined;
+			},
+			cancel() {
+				clearTimeout(this.timeoutId);
+			}
+		};
+		const loader = document.getElementById('loader');
+		const idle = {
+			element: document.getElementById('idle'),
+			delay: cycleDelay * 1000,
+			position: 0,
+			cycle() {
+				if (typeof this.intervalId === 'number') {
+					this.cancel();
+				}
+				this.intervalId = setInterval(() => {
+					this.position++;
+					if (this.position >= flagColors.length) {
+						this.position = 0;
+					}
+					this.element.style.backgroundColor = '#' + flagColors[this.position];
+				}, this.delay);
+			},
+			cancel() {
+				this.intervalId && clearInterval(this.intervalId);
+			}
+		}
+		init()
+			.then(loadCore)
+			.then(showIntro)
+			.catch(er => console.error(er))
+			.then(showAgreement)
+			.then(showIdle)
+			.catch(er => console.error(er))
+			. finally(() => {
+				console.debug('Init end.', isAgree);
+				// location = 'demo/examples/ui/new.html';
+			});
+	</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index f7534f3..4a0dfed 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -1,9 +1,8 @@
 ---
-title: Init
+title: UI
 tags: 
   - demoExample
   - index
-  - ui
 ---
 
 {% set pageId = "init" %}
@@ -24,128 +23,16 @@ tags:
 {% endblock %}
 
 {% block body %}
-	<div id="loader" class="step op_show">
-		<div id="bar">
-			<div id="spinner">
-				<span>I</span>
-			</div>
-			<div id="wrap">
-				<div id="progress"></div>
-			</div>
-			<div id="status">0%</div>
-		</div>
+	<div class="sec_main_center">
+		<nav role="doc-toc">
+			<h1>Inhaltsverzeichnis</h1>
+			<ul class="list_link">
+				{%- for ui in collections.ui -%}
+					<li>
+						<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
+					</li>
+				{%- endfor -%}
+			</ul>
+		</nav>
 	</div>
-	<div id="intro" class="step op_hide">
-		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-			<p>Hold
-				<kbd>space</kbd>
-				to skip.</p>
-		</div>
-		{{ ph.brand('brand') }}
-		<p>Powered by</p>
-		<ul class="tech-stack">
-			<li>Vendor</li>
-			<li>IDE</li>
-			<li>Engine</li>
-		</ul>
-	</div>
-	<div id="agreement" class="step op_hide">
-		<h1>Agreement</h1>
-		<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
-	</div>
-	<div id="idle" class="step op_hide">
-		<div class="mouse_over"></div>
-		<div class="hello">Hello World!</div>
-		<p class="hello">Only left mouse click or any key</p>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}js/_intro.js"></script>
-	<script>
-		//let intro = new Intro('Intro');
-		//intro.init();
-
-		//const ui = new UI();
-		//ui
-		//  .init()
-		//  .then(() => ui.showIntro())
-		//  .then(() => ui.showHint())
-		//  .then(() => ui.showIdle())
-		//  .catch((error) => console.error(error));
-
-		let introDelay = 6;
-		let hintDelay = 1;
-		let cycleDelay = 2;
-		let isAgree = false;
-		const steps = {
-			agreement: {
-				element: document.getElementById('agreement'),
-				msgIn: 'Agreement shown.',
-				msgOut: 'Agreement accepted.',
-				msgNo: 'No agreement today.'
-			}
-		};
-		const intro = document.getElementById('intro');
-		const agreement = steps.agreement.element;
-		const hint = {
-			element: document.getElementById('hint'),
-			delay: hintDelay * 1000,
-			show() {
-				if (typeof this.timeoutId === 'number') {
-					this.cancel();
-				}
-				this
-					.element
-					.classList
-					.remove('di_none');
-				this.timeoutId = setTimeout(() => {
-					this.dismiss();
-				}, this.delay);
-			},
-			dismiss() {
-				this
-					.element
-					.classList
-					.add('di_none');
-				this.timeoutId = undefined;
-			},
-			cancel() {
-				clearTimeout(this.timeoutId);
-			}
-		};
-		const loader = document.getElementById('loader');
-		const idle = {
-			element: document.getElementById('idle'),
-			delay: cycleDelay * 1000,
-			position: 0,
-			cycle() {
-				if (typeof this.intervalId === 'number') {
-					this.cancel();
-				}
-				this.intervalId = setInterval(() => {
-					this.position++;
-					if (this.position >= flagColors.length) {
-						this.position = 0;
-					}
-					this.element.style.backgroundColor = '#' + flagColors[this.position];
-				}, this.delay);
-			},
-			cancel() {
-				this.intervalId && clearInterval(this.intervalId);
-			}
-		}
-		init()
-			.then(loadCore)
-			.then(showIntro)
-			.catch(er => console.error(er))
-			.then(showAgreement)
-			.then(showIdle)
-			.catch(er => console.error(er))
-			. finally(() => {
-				console.debug('Init end.', isAgree);
-				// location = 'demo/examples/ui/new.html';
-			});
-	</script>
 {% endblock %}
\ No newline at end of file