diff --git a/source/code/_intro.js b/source/code/_intro.js
index 71db197..426bb57 100644
--- a/source/code/_intro.js
+++ b/source/code/_intro.js
@@ -116,6 +116,13 @@ function init() {
 	return new Promise((resolve) => {
 		console.log('Init');
 
+		// Set all steps to not receive pointer events
+		document.querySelectorAll('.step').forEach(element => {
+			console.log(element);
+			
+			element.style.pointerEvents = 'none';
+		});
+
 		resolve();
 	});
 }
@@ -161,6 +168,8 @@ function showAgreement() {
 			console.info(steps.agreement.msgIn);
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+
 			el.addEventListener('click', agreeHandler);
 		} else {
 			reject(steps.agreement.msgNo);
@@ -187,13 +196,21 @@ function showAgreement() {
 function showIdle() {
 	const el = document.getElementById('idle');
 
+	document.addEventListener('mouseleave', idleStart, false);
+	document.addEventListener('mouseenter', idleStop, false);
+
 	return new Promise((resolve, reject) => {
 		if (el) {
 			console.info('Idle.');
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+			el.addEventListener('click', idleStart, false);
 			resolve('Idle.');
 		} else {
+			document.removeEventListener('mouseleave', idleStart);
+			document.removeEventListener('mouseenter', idleStop);
+
 			reject();
 		}
 	})
@@ -271,6 +288,14 @@ function hintHandler() {
 	hint.show();
 }
 
+function idleStart() {
+	idle.cycle();
+}
+
+function idleStop() {
+	idle.cancel();
+}
+
 /**
  * Blendet einen Schritt aus.
  * 
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index c01cb81..fdd8d97 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -1,124 +1,150 @@
 ---
 title: Init
 tags: 
-  - demoExample
-  - index
-  - ui
+	- demoExample
+	- index
+	- ui
 ---
+
 {% set pageId = "init" %}
 {% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
-
-{% block title %}{{ title }}
+{% block title %}
+	{{ title }}
 {% endblock %}
 
 {% block links %}
-		<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
 {% endblock %}
 
 {% block head %}
-		{{ super() }}
+	{{ 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 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 id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
-			<p>Hold <kbd>space</kbd> to skip.</p>
-		</div>
-		<div id="intro" class="step op_hide">
-			{{ 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="hello">Hello World!</div>
-			<p class="hello">Only left mouse click or any key</p>
-		</div>
+	</div>
+	<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+		<p>Hold
+			<kbd>space</kbd>
+			to skip.</p>
+	</div>
+	<div id="intro" class="step op_hide">
+		{{ 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)); #}
+	{{ super() }}
+	<script src="{{ pageBase }}js/_intro.js"></script>
+	<script>
+		//let intro = new Intro('Intro');
+		//intro.init();
 
-			let introDelay = 6;
-			let hintDelay = 1;
-			let isAgree = false;
+		//const ui = new UI();
+		//ui
+		//  .init()
+		//  .then(() => ui.showIntro())
+		//  .then(() => ui.showHint())
+		//  .then(() => ui.showIdle())
+		//  .catch((error) => console.error(error));
 
-			const steps = {
-				agreement: {
-					element: document.getElementById('agreement'),
-					msgIn: 'Agreement shown.',
-					msgOut: 'Agreement accepted.',
-					msgNo: 'No agreement today.'
+		let introDelay = 6;
+		let hintDelay = 1;
+		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();
 				}
-			};
-			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: 2000,
+			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.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');
-
-			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>
+					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/style/hippie-style b/source/style/hippie-style
index 9f3797f..d17f966 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
+Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f74e666..65b6b0b 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -44,7 +44,6 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: white;
-	pointer-events: none;
 }
 
 #bar {
@@ -113,7 +112,6 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: black;
-	pointer-events: none;
 
 	h1,
 	p,
@@ -154,19 +152,26 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	height: 100vh;
-	background-color: $color_back_basic;
 }
 
 #agreement {
 	flex-direction: column;
+	background-color: $bravo_color;
 
 	h1 {
 		margin-top: 0;
+		color: $color_brightest;
 	}
 }
 
 #idle {
-	pointer-events: none;
+	background-color: $color_back_basic;
+	transition: background-color 1s;
+
+	&:hover>.mouse_over {
+		background-color: transparent !important;
+		transition: background-color $duration_basic $timing_basic 0s !important;
+	}
 }
 
 .toast {
@@ -188,8 +193,8 @@ $z-indexes: (
 .hello {
 	flex: 0 1 auto;
 	padding: 1em 2em;
-	// background-color: rgba(black, .25);
-	background-color: $color_darker;
+	background-color: rgba($color_bright, .5);
+	font-family: $family_text_mono;
 }
 
 @import "modules/ui/new_module";