diff --git a/TODO.md b/TODO.md
index 5c33350..6af7f1b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -20,9 +20,6 @@
   - Keep placeholder and demo stuff
   - Move other things
   - Prevent styles to be global
-- Adapt bootstrap utility API
-  - https://github.com/twbs/bootstrap/blob/main/scss/utilities/_api.scss
-  - https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss
 
 # JS
 
diff --git a/source/code/game.js b/source/code/game.js
deleted file mode 100644
index b961fdb..0000000
--- a/source/code/game.js
+++ /dev/null
@@ -1,313 +0,0 @@
-class HippieCrosshair {
-	constructor(canvas, options = {}) {
-		this.canvas = canvas;
-		this.ctx = canvas.getContext('2d');
-
-		this.debug = options.debug || false;
-
-		const defaults = {
-			crosshair: {
-				size: 16,
-				thickness: 2,
-				color: '#000',
-				gapSize: 8,
-				style: 'cross'
-			},
-			connector: {
-				distance: 128, // Distance to draw next symbol
-				spacing: 64, // Space between symbols
-				size: 8,
-				color: '#000',
-				style: 'arrow',
-				visibility: true
-			},
-			line: {
-				color: 'rgba(0, 0, 0, 0.1)',
-				width: 1
-			}
-		};
-		const merged = this.mergeOptions(defaults, options);
-		const { crosshair, connector, line } = merged;
-
-		// Crosshair options
-		this.size = crosshair.size;
-		this.thickness = crosshair.thickness;
-		this.color = crosshair.color;
-		this.gapSize = crosshair.gapSize;
-		this.style = crosshair.style;
-
-		// Connector options
-		this.distance = connector.distance;
-		this.spacing = connector.spacing;
-		this.connectorSize = connector.size;
-		this.connectorColor = connector.color;
-		this.connectorStyle = connector.style;
-		this.connectorShow = connector.visibility;
-
-		// Line options
-		this.lineColor = line.color || '#fff';
-		this.lineWidth = line.width || 1;
-
-		this.mouseX = canvas.width / 2;
-		this.mouseY = canvas.height / 2;
-
-		// Animation control
-		this.isAnimating = true;
-		this.animationFrameId = null;
-
-		this.setupEventListeners();
-		this.animate();
-	}
-
-	mergeOptions(defaults, options) {
-		const merged = JSON.parse(JSON.stringify(defaults));
-
-		if (options.crosshair) {
-			Object.assign(merged.crosshair, options.crosshair);
-		}
-		if (options.connector) {
-			Object.assign(merged.connector, options.connector);
-		}
-		if (options.line) {
-			Object.assign(merged.line, options.line);
-		}
-
-		return merged;
-	}
-
-	setupEventListeners() {
-		document.addEventListener('mousemove', (event) => {
-			this.mouseX = event.clientX;
-			this.mouseY = event.clientY;
-		});
-	}
-
-	animate() {
-		if (!this.isAnimating) {
-			this.animationFrameId = requestAnimationFrame(() => this.animate());
-			return;
-		}
-
-		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-		if (this.connectorShow) {
-			if (this.debug) this.drawLine();
-			this.drawConnector();
-		}
-
-		// TODO: Autom. Zug zum Zentrum hin ermöglichen
-		this.drawCrosshair();
-
-		this.animationFrameId = requestAnimationFrame(() => this.animate());
-	}
-
-	drawLine() {
-		const centerX = this.canvas.width / 2;
-		const centerY = this.canvas.height / 2;
-
-		this.ctx.strokeStyle = this.lineColor;
-		this.ctx.lineWidth = this.lineWidth;
-		this.ctx.beginPath();
-		this.ctx.moveTo(centerX, centerY);
-		this.ctx.lineTo(this.mouseX, this.mouseY);
-		this.ctx.stroke();
-	}
-
-	// TODO: Ausblenden nach Distanz
-	drawConnector() {
-		const centerX = this.canvas.width / 2;
-		const centerY = this.canvas.height / 2;
-
-		const dx = this.mouseX - centerX;
-		const dy = this.mouseY - centerY;
-		const delta = Math.sqrt(dx * dx + dy * dy);
-
-		// Only draw connectors if cursor is far enough from center
-		if (delta < this.distance) {
-			return;
-		}
-
-		const angle = Math.atan2(dy, dx);
-		const count = Math.floor((delta - this.distance) / this.spacing);
-
-		for (let i = 0; i < count; i++) {
-			const distance = this.distance + (i * this.spacing);
-			const x = centerX + Math.cos(angle) * distance;
-			const y = centerY + Math.sin(angle) * distance;
-
-			this.drawSymbol(x, y, angle);
-		}
-	}
-
-	drawSymbol(x, y, angle = 0) {
-		this.ctx.fillStyle = this.connectorColor;
-		this.ctx.strokeStyle = this.connectorColor;
-		this.ctx.lineWidth = 1;
-
-		switch (this.connectorStyle) {
-			case 'circle':
-				this.ctx.beginPath();
-				this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2);
-				this.ctx.fill();
-				break;
-			case 'diamond':
-				const size = this.connectorSize - (this.connectorSize / 4);
-				this.ctx.beginPath();
-				this.ctx.moveTo(x, y - size);
-				this.ctx.lineTo(x + size, y);
-				this.ctx.lineTo(x, y + size);
-				this.ctx.lineTo(x - size, y);
-				this.ctx.closePath();
-				this.ctx.fill();
-				break;
-			case 'square':
-				this.ctx.fillRect(
-					x - this.connectorSize / 2,
-					y - this.connectorSize / 2,
-					this.connectorSize,
-					this.connectorSize
-				);
-				break;
-			case 'arrow':
-				this.arrow(x, y, angle);
-				break;
-		}
-	}
-
-	arrow(x, y, angle) {
-		const size = this.connectorSize - (this.connectorSize / 4);
-
-		this.ctx.save();
-		this.ctx.translate(x, y);
-		this.ctx.rotate(angle);
-
-		// Arrow pointing right
-		this.ctx.beginPath();
-		this.ctx.moveTo(size, 0); // Tip
-		this.ctx.lineTo(-size, -size); // Back left
-		// this.ctx.lineTo(-size * 0.4, 0); // Middle
-		this.ctx.lineTo(-size, size); // Back right
-		this.ctx.closePath();
-		this.ctx.fill();
-
-		this.ctx.restore();
-	}
-
-	drawCrosshair() {
-		this.ctx.strokeStyle = this.color;
-		this.ctx.lineWidth = this.thickness;
-		this.ctx.lineCap = 'round';
-
-		switch (this.style) {
-			case 'cross':
-				this.cross();
-				break;
-			case 'circle':
-				this.circle();
-				break;
-			case 'dot':
-				this.dot();
-				break;
-			case 'level':
-				this.level();
-				break;
-		}
-	}
-
-	cross() {
-		// Horizontal line
-		this.ctx.beginPath();
-		this.ctx.moveTo(this.mouseX - this.size, this.mouseY);
-		this.ctx.lineTo(this.mouseX - this.gapSize, this.mouseY);
-		this.ctx.stroke();
-
-		this.ctx.beginPath();
-		this.ctx.moveTo(this.mouseX + this.gapSize, this.mouseY);
-		this.ctx.lineTo(this.mouseX + this.size, this.mouseY);
-		this.ctx.stroke();
-
-		// Vertical line
-		this.ctx.beginPath();
-		this.ctx.moveTo(this.mouseX, this.mouseY - this.size);
-		this.ctx.lineTo(this.mouseX, this.mouseY - this.gapSize);
-		this.ctx.stroke();
-
-		this.ctx.beginPath();
-		this.ctx.moveTo(this.mouseX, this.mouseY + this.gapSize);
-		this.ctx.lineTo(this.mouseX, this.mouseY + this.size);
-		this.ctx.stroke();
-	}
-
-	circle() {
-		// Outer circle
-		this.ctx.beginPath();
-		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI * 2);
-		this.ctx.stroke();
-
-		// Inner dot
-		this.ctx.fillStyle = this.color;
-		this.ctx.beginPath();
-		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
-		this.ctx.fill();
-	}
-
-	dot() {
-		this.ctx.fillStyle = this.color;
-		this.ctx.beginPath();
-		this.ctx.arc(this.mouseX, this.mouseY, this.size / 4, 0, Math.PI * 2);
-		this.ctx.fill();
-	}
-
-	level() {
-		this.ctx.beginPath();
-		this.ctx.moveTo(this.mouseX - this.size * 2, this.mouseY);
-		this.ctx.lineTo(this.mouseX - this.gapSize * 2, this.mouseY);
-		this.ctx.stroke();
-
-		this.ctx.beginPath();
-		this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI);
-		this.ctx.stroke();
-
-		this.ctx.beginPath();
-		this.ctx.moveTo(this.mouseX + this.gapSize * 2, this.mouseY);
-		this.ctx.lineTo(this.mouseX + this.size * 2, this.mouseY);
-		this.ctx.stroke();
-
-		this.ctx.fillStyle = this.color;
-		this.ctx.beginPath();
-		this.ctx.arc(this.mouseX, this.mouseY, this.thickness, 0, Math.PI * 2);
-		this.ctx.fill();
-	}
-
-	setCrosshairStyle(style) {
-		this.style = style;
-	}
-
-	setCrosshairColor(color) {
-		this.color = color;
-	}
-
-	setConnectorStyle(style) {
-		this.connectorStyle = style;
-	}
-
-	setConnectorColor(color) {
-		this.connectorColor = color;
-	}
-
-	setConnectorVisibility(visible) {
-		this.connectorShow = visible;
-	}
-
-	startAnimation() {
-		this.isAnimating = true;
-	}
-
-	stopAnimation() {
-		this.isAnimating = false;
-	}
-
-	toggleAnimation() {
-		this.isAnimating = !this.isAnimating;
-	}
-}
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index eb6eda9..7cda8b6 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -540,15 +540,6 @@ function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp =
 	return mapped;
 }
 
-function zeroFill(number, width) {
-	width -= number.toString().length;
-
-	if (width > 0) {
-		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
-	}
-	return number + ''; // always return a string
-}
-
 // Source - https://stackoverflow.com/a/47480429
 // Posted by Etienne Martin, modified by community. See post 'Timeline' for change history
 // Retrieved 2026-03-08, License - CC BY-SA 4.0
@@ -612,6 +603,91 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
+function ongoing() {
+
+	var now = new Date();
+
+	var w = Math.floor(now.getDay());
+	var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+	var DNumb = Math.floor(now.getDate());
+	var MNumb = Math.floor(now.getMonth());
+	var M = ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'MaiOktober', 'November', 'Dezember'];
+	var y = Math.floor(now.getYear());
+	if (y < 999) y += 1900;
+
+	var ms = Math.floor(now.getMilliseconds());
+	var s = Math.floor(now.getSeconds());
+	var m = Math.floor(now.getMinutes() + s / 60);
+	var h = Math.floor(now.getHours() + m / 60);
+
+	var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
+	j2000.setUTCFullYear(2000, 0, 1);
+	j2000.setUTCHours(0, 0, 0, 0);
+
+	var utc = new Date();
+	utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
+	utc.setUTCHours(h, m, s, ms);
+
+	var utc0 = new Date();
+	utc0.setUTCFullYear(y, MNumb, DNumb);
+	utc0.setUTCHours(0, 0, 0, 0);
+
+	var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
+	var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
+
+	var N = jd - 2451545.0;
+	var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
+	var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
+	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
+	var e = 23.439 - 0.0000004 * N;
+	var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
+
+	var T = (jdUTC0 - 2451545.0) / 36525;
+	var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
+
+	var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
+	var hWGMT = stGMT2 * 15;
+	var hW = hWGMT + 11.9566185772;
+
+	var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
+	var st24 = Math.abs(st - (Math.round(st / 24) * 24));
+	var stH = Math.floor(st24);
+	var stM = Math.floor((st24 % 1) * 60);
+	var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
+
+	var travelWidth = document.body.clientWidth;
+	var travelHeight = document.body.clientHeight;
+	var sunPosX = 0;
+	var sunPosY = 0;
+	var moonPosX = 0;
+	var moonPosY = 0;
+
+	var sun = $('#sun').css({
+		'left': (s / 60) * travelWidth,
+		'top': (m / 60) * travelHeight
+	});
+
+	$('#day').text(D[w]);
+	$('#dayNumb').text(DNumb);
+	$('#month').text(M[MNumb]);
+	$('#year').text(y);
+	$('#time').text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
+
+	$('#julian').text(jd.toFixed(6));
+	//$('#star').text(stH + ':' + stM + ':' + stS);
+	$('#star').text(stH + ':' + stM);
+	$('#star1').text(stGMT);
+	$('#star2').text(stGMT2);
+}
+
+function zeroFill(number, width) {
+	width -= number.toString().length;
+	if (width > 0) {
+		return new Array(width + (/\./.test(number) ? 2 : 1)).join('0') + number;
+	}
+	return number + ''; // always return a string
+}
+
 //Länge der Balken im Diagram berechnen
 function barwidth(size, G, W) {
 	var s = size;
diff --git a/source/data/start.json b/source/data/start.json
index 65bfb14..cc0da22 100644
--- a/source/data/start.json
+++ b/source/data/start.json
@@ -8,7 +8,7 @@
 		"href": "/demo/basics.html"
 	},
 	{
-		"text": "Portal",
-		"href": "/demo/examples/portal.html"
+		"text": "Drag",
+		"href": "/demo/examples/ui/drag.html"
 	}
 ]
\ No newline at end of file
diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index f1c8560..d3c7a08 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -801,7 +801,7 @@ order: 2
 			<code>&lt;fieldset&gt;</code>
 			realisiert.</p>
 		<fieldset>
-			<div class="dis_grid grid_column_2">
+			<div class="grid grid_column_2">
 				<label for="demo__input">Input:</label><input class="input_io" type="text" value="love"
 															  readonly="readonly" id="demo__input">
 				<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness"
@@ -813,7 +813,7 @@ order: 2
 			auch eine eigene Beschriftung erhalten.</p>
 		<fieldset>
 			<legend>Einfache Eingabeelemente</legend>
-			<div class="dis_grid grid_column_2">
+			<div class="grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div>
 					<button>Senden</button>
@@ -846,7 +846,7 @@ order: 2
 		</fieldset>
 		<fieldset>
 			<legend>Einfache Eingabeelemente mit Stil</legend>
-			<div class="dis_grid grid_column_2">
+			<div class="grid grid_column_2">
 				<label>Schaltflächen:</label>
 				<div class="flex inline">
 					<button class="button_io">Senden</button>
@@ -883,7 +883,7 @@ order: 2
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
 			<form action="">
-				<div class="dis_grid grid_column_2">
+				<div class="grid grid_column_2">
 					<label class="">Farbauswahl<br>
 						<code>&lt;input[type="color"]&gt;</code>
 					</label>
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 98f582c..2ea1d8d 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -286,17 +286,12 @@ order: 3
 				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table.grid>(tr>td+td.ellipsis+td)*2</code></pre>
-		<table class="grid">
+		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
+		<table class="flexible">
 			<tr>
 				<td>Index</td>
-				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
-				<td>Inhalt bestimmt die Breite</td>
-			</tr>
-			<tr>
-				<td>101</td>
-				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
-				<td>Zelle</td>
+				<td class="truncate ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
+				<td>Zelle mit Angabe der Breite.</td>
 			</tr>
 		</table>
 	</article>
diff --git a/source/screens/demo/examples/10print.liquid b/source/screens/demo/examples/10print.liquid
index 8ed878e..9ee9246 100644
--- a/source/screens/demo/examples/10print.liquid
+++ b/source/screens/demo/examples/10print.liquid
@@ -5,7 +5,8 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
-{% block style %}
+{% block head %}
+{{ block.super -}}
 <style>
 	canvas {
 		display: block;
@@ -19,6 +20,7 @@ tags:
 
 {% block script %}
 <script>
+	// Page script
 	const canvas = document.getElementById('pattern');
 	const ctx = canvas.getContext('2d');
 
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 57cdd7c..3740eaa 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -27,8 +27,6 @@ tags:
 <script>
 	class HippieClock {
 		constructor(element, date = new Date(), options = {}) {
-			this.element = element;
-			this.date = date;
 			this.defaults = {
 				debug: true,
 				size: Math.floor(this.getSize().value * 0.9),
@@ -37,6 +35,8 @@ tags:
 				overlay: false
 			};
 			this.options = {...this.defaults, ...options};
+			this.element = element;
+			this.date = date;
 			this.values = this.getTime();
 			this.parts = [];
 			this.shapes = [];
diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid
deleted file mode 100644
index a4c61a6..0000000
--- a/source/screens/demo/examples/game/fpv.liquid
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: FPV
-tags:
-- game
----
-{% assign bodyClass = 'body_fpv' -%}
-{% layout 'hippie/simple.liquid' %}
-
-{% block links %}
-{{ block.super -}}
-<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-{% endblock %}
-
-{% block body %}
-<canvas id="view"></canvas>
-
-<header class="io controls">
-	<nav>
-		<button onclick="toggleAnimation()">Toggle</button>
-	</nav>
-	<nav>
-		<span>Color</span>
-		<button onclick="changeColor('black')">Black</button>
-		<button onclick="changeColor('white')">White</button>
-		<button onclick="changeColor('crimson')">Red</button>
-		<button onclick="changeColor('#00ffff')">Cyan</button>
-	</nav>
-	<nav>
-		<span>Crosshair</span>
-		<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
-		<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
-		<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
-		<button onclick="changeCrosshairStyle('level')"><i class="bi bi-dash-circle"></i></button>
-	</nav>
-	<nav>
-		<span>Connector</span>
-		<button onclick="toggleConnector()">Toggle</button>
-		<hr class="vertical">
-		<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
-		<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
-		<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
-		<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
-	</nav>
-</header>
-{% endblock %}
-
-{% block assets %}
-<script src="/js/game.js"></script>
-{% endblock %}
-
-{% block script %}
-<script>
-	const canvas = document.getElementById('view');
-	canvas.width = window.innerWidth;
-	canvas.height = window.innerHeight;
-
-	const crosshair = new HippieCrosshair(canvas);
-
-	function changeCrosshairStyle(style) {
-		crosshair.setCrosshairStyle(style);
-	}
-
-	function changeConnectorStyle(style) {
-		crosshair.setConnectorStyle(style);
-	}
-
-	function changeColor(color) {
-		crosshair.setCrosshairColor(color);
-		crosshair.setConnectorColor(color);
-		crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
-	}
-
-	function toggleConnector() {
-		crosshair.setConnectorVisibility(!crosshair.connectorShow);
-	}
-
-	function toggleAnimation() {
-		crosshair.toggleAnimation();
-	}
-
-	window.addEventListener('resize', () => {
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-	});
-</script>
-
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/game/index.liquid b/source/screens/demo/examples/game/index.liquid
index 6dc8d2f..d939850 100644
--- a/source/screens/demo/examples/game/index.liquid
+++ b/source/screens/demo/examples/game/index.liquid
@@ -6,6 +6,8 @@ tags:
 ---
 {% layout 'hippie/simple.liquid' %}
 
+{% block title %}{{ title }}{% endblock %}
+
 {% block body %}
 <div class="sec_main_center">
 	<nav role="doc-toc">
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 1b4a39c..4c68c5a 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -8,44 +8,34 @@ tags:
 {% layout 'hippie/simple.liquid' %}
 
 {% block body %}
-{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
 <main>
-	<header class="io">
-		<form id="wwwForm" class="group_nav" action="https://duckduckgo.com/">
-			<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
-			<input class="button_io" value="Suchen" type="submit"/>
-		</form>
-		<nav>
-			<hr class="vertical">
-			<ul>
-				<li>
-					<a href="" class="a_button">A</a>
-				</li>
-				<li>
-					<a href="" class="a_button">B</a>
-				</li>
-			</ul>
-		</nav>
-	</header>
-	<div class="area">
-		<div>1</div>
-		<div>2</div>
-		<div>3</div>
-		<div>4</div>
+	<form id="www_search" class="flex inline" action="https://duckduckgo.com/">
+		<input id="qrySearch" class="input_io" name="q" placeholder="Suchbegriff" type="text" required/>
+		<input class="button_io" value="Suchen" type="submit"/>
+	</form>
+	<div class="blocks">
+		<article>
+			<section>
+				<h2><a href="">Name</a></h2>
+				<ul>
+					<li>
+						<a href=""><img src="/art/bullet.gif" width="16" height="16"/>Link</a>
+					</li>
+				</ul>
+			</section>
+		</article>
+		<article>
+			<section>
+				<h2><a href="">Name</a></h2>
+			</section>
+		</article>
 	</div>
 </main>
 {% endblock %}
 
-{% block assets %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
-
 {% block script %}
 <script>
-	const timeElement = document.getElementById('time');
-	const dateElement = document.getElementById('date');
+	// Page script
 	// NOTE: https://duckduckgo.com/duckduckgo-help-pages/settings/params
 	const defaultOptions = {
 		kl: 'de-de',
@@ -75,26 +65,8 @@ tags:
 		return base + '?' + params.toString();
 	}
 
-	// Example of setting options programmatically:
-	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
-
-	new TimeDisplay(timeElement, {hour: '2-digit', minute: '2-digit'});
-	new DateDisplay(dateElement, {
-		weekday: "long",
-		year: "numeric",
-		month: "long",
-		day: "numeric",
-	});
-	// ongoing();
-
-	document.addEventListener('mousemove', (event) => {
-		document
-			.getElementById('log')
-			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-	});
-
-	document.getElementById('wwwForm').addEventListener('submit', function (event) {
-		event.preventDefault();
+	document.getElementById('www_search').addEventListener('submit', function (e) {
+		e.preventDefault();
 		const query = document.getElementById('qrySearch').value.trim();
 
 		if (!query) return;
@@ -104,81 +76,7 @@ tags:
 		window.open(url, '_blank', 'noopener');
 	});
 
-	function ongoing() {
-		var now = new Date();
-		var w = Math.floor(now.getDay());
-		var D = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
-		var DNumb = Math.floor(now.getDate());
-		var MNumb = Math.floor(now.getMonth());
-		var M = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
-		var y = Math.floor(now.getYear());
-		if (y < 999) y += 1900;
-
-		var ms = Math.floor(now.getMilliseconds());
-		var s = Math.floor(now.getSeconds());
-		var m = Math.floor(now.getMinutes() + s / 60);
-		var h = Math.floor(now.getHours() + m / 60);
-
-		var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
-		j2000.setUTCFullYear(2000, 0, 1);
-		j2000.setUTCHours(0, 0, 0, 0);
-
-		var utc = new Date();
-		utc.setUTCFullYear(y, MNumb, DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
-		utc.setUTCHours(h, m, s, ms);
-
-		var utc0 = new Date();
-		utc0.setUTCFullYear(y, MNumb, DNumb);
-		utc0.setUTCHours(0, 0, 0, 0);
-
-		var jd = 2451544.5 + (utc - j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
-		var jdUTC0 = 2451544.5 + (utc0 - j2000) / 86400000;
-
-		var N = jd - 2451545.0;
-		var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
-		var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
-		var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2 * g);
-		var e = 23.439 - 0.0000004 * N;
-		var rektaszension = Math.atan((Math.cos(e) * Math.sin(el)) / Math.cos(el));
-
-		var T = (jdUTC0 - 2451545.0) / 36525;
-		var stGMT = (((6 * 3600) + (41 * 60) + 50.54841) + (8640184.812866 * T) + (0.093104 * Math.pow(T, 2)) - (0.0000062 * Math.pow(T, 3))) / 3600;
-
-		var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
-		var hWGMT = stGMT2 * 15;
-		var hW = hWGMT + 11.9566185772;
-
-		var st = (stGMT + (now.getUTCHours() * 1.00273790935)) + (11.9566185772 / 15); // Sommerzeit muss noch berücksichtigt werden
-		var st24 = Math.abs(st - (Math.round(st / 24) * 24));
-		var stH = Math.floor(st24);
-		var stM = Math.floor((st24 % 1) * 60);
-		var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
-
-		const travelWidth = document.body.clientWidth;
-		const travelHeight = document.body.clientHeight;
-		var sunPosX = 0;
-		var sunPosY = 0;
-		var moonPosX = 0;
-		var moonPosY = 0;
-
-		const sun = document.getElementById('sun');
-
-		if (sun) {
-			sun.style.left = (s / 60) * travelWidth;
-			sun.style.top = (m / 60) * travelHeight;
-		}
-
-		/*document.getElementById('time').textContent = '' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2);
-		document.getElementById('day').textContent = D[w];
-		document.getElementById('dayNumb').textContent = DNumb;
-		document.getElementById('month').textContent = M[MNumb];
-		document.getElementById('year').textContent = y;
-
-		document.getElementById('julian').textContent = jd.toFixed(6);
-		document.getElementById('star').textContent = stH + ':' + stM + ':' + stS;
-		document.getElementById('star').textContent = stH + ':' + stM;
-		document.getElementById('star1').textContent = stGMT;
-		document.getElementById('star2').textContent = stGMT2;*/
-	}
+	// Example of setting options programmatically:
+	// setOptions({ kl: 'de-de', kp: '2', iar: 'images' });
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/gallery.liquid b/source/screens/demo/examples/ui/gallery.liquid
index b2871d2..0d372d4 100755
--- a/source/screens/demo/examples/ui/gallery.liquid
+++ b/source/screens/demo/examples/ui/gallery.liquid
@@ -12,7 +12,7 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group_nav">
+				<div class="group-input">
 					<input id="setSize" value="5" min="1" max="10" step="1" type="range"/>
 					<label class="right" for="setSize">Größe</label>
 				</div>
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index bd0bbbb..570d1dc 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -12,11 +12,11 @@ tags:
 	<section>
 		<header class="io">
 			<nav>
-				<div class="group_nav">
+				<div class="group-input">
 					<button id="addEntry" title="Add entry">
 						<i class="bi bi-plus-circle"></i>
 					</button>
-					<div class="wrap_input"><input id="setScroll" type="checkbox"></div>
+					<div class="group-input-wrap"><input id="setScroll" type="checkbox"></div>
 					<label for="setScroll">Scroll to new entry</label>
 				</div>
 			</nav>
@@ -24,7 +24,7 @@ tags:
 				<button id="tglIndex" title="Toggle index column">
 					<i class="bi bi-hash"></i>
 				</button>
-				<div class="group_nav">
+				<div class="group-input">
 					<select id="sltNum" name="position-number">
 						<option value="" selected>None</option>
 						<option value="numeric">123</option>
diff --git a/source/screens/demo/examples/ui/tile.liquid b/source/screens/demo/examples/ui/tile.liquid
new file mode 100644
index 0000000..be51071
--- /dev/null
+++ b/source/screens/demo/examples/ui/tile.liquid
@@ -0,0 +1,45 @@
+---
+title: Tile
+tags:
+- ui
+---
+{% assign bodyClass = 'body_new' -%}
+{% layout 'hippie/app.liquid' %}
+
+{% block body %}
+{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
+<header class="area menu io">
+	<nav>
+		<ul>
+			<li>
+				<a href="" class="a_button">Func 1</a>
+			</li>
+			<li>
+				<a href="" class="a_button">Func 2</a>
+			</li>
+		</ul>
+	</nav>
+</header>
+<div class="area grid">
+	<div class="item">1</div>
+	<div class="item">2</div>
+	<div class="item">3</div>
+	<div class="item">4</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	const timeElement = document.getElementById('time');
+	const timeDisplay = new TimeDisplay(timeElement);
+
+	ongoing();
+
+	document.addEventListener('mousemove', (event) => {
+		document
+			.getElementById('log')
+			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+	});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 848754c..43f66d8 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 848754c6150df95207dffa36f388c696330cf56b
+Subproject commit 43f66d8178c7225931d6358d1f37797461a0a94d
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 6ffbc12..0965587 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,7 +1,7 @@
-@use "sass:map";
-
 @use "../hippie-style/hippie";
 
+@use "sass:map";
+
 .body_clock {
 	header {
 		z-index: map.get(hippie.$z-indexes, "content-top");
diff --git a/source/style/modules/_game.scss b/source/style/modules/_game.scss
index 1c24812..6d49400 100644
--- a/source/style/modules/_game.scss
+++ b/source/style/modules/_game.scss
@@ -1,34 +1,5 @@
-@use 'sass:list';
-@use "sass:map";
-
 @use "../hippie-style/hippie";
 
-$colors: hippie.$color_palette;
-$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
-
-@function getColor($index, $colors) {
-	$color_keys: map.keys($colors);
-	$key_count: list.length($color_keys);
-	$cycled_index: ($index % $key_count) + 1;
-	$key: list.nth($color_keys, $cycled_index);
-	@return map.get($colors, $key);
-}
-
-@mixin fadeColors($steps, $colors) {
-	@keyframes fadeColor {
-		@for $i from 1 through list.length($steps) {
-			$percent: list.nth($steps, $i);
-			$color: getColor($i - 1, $colors);
-
-			#{$percent}% {
-				background-color: $color;
-			}
-		}
-	}
-
-	animation: fadeColor 16s infinite linear;
-}
-
 .body_game {
 	@extend .h_full_view;
 	background-color: hotpink;
@@ -53,22 +24,4 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
 			}
 		}
 	}
-}
-
-.body_fpv {
-	@extend .h_full_view;
-
-	canvas {
-		@include fadeColors($steps, $colors);
-
-		display: block;
-		cursor: none;
-	}
-
-	.controls {
-		position: fixed;
-		top: 0;
-		left: 0;
-		border-radius: hippie.$radius_basic;
-	}
 }
\ No newline at end of file
diff --git a/source/style/modules/_login.scss b/source/style/modules/_login.scss
index 42c57a0..3382d86 100644
--- a/source/style/modules/_login.scss
+++ b/source/style/modules/_login.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "../hippie-style/hippie";
 
 form[name="login"] {
diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss
index d2f31f9..564e8a3 100644
--- a/source/style/modules/_start.scss
+++ b/source/style/modules/_start.scss
@@ -1,111 +1,15 @@
-@use "sass:color";
-
 @use "../hippie-style/hippie";
 
-$module_top_height: 32px;
-$body_top_space: $module_top_height + hippie.$space_basic;
-
 .body_start {
-	@extend .h_full_view;
-
-	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
-
 	main {
 		@extend .sec_main_center;
-		@extend %flex_column;
-
-		height: 100%;
 	}
 
-	form {
-		flex: 1;
-
+	#www_search {
 		input[type="text"] {
 			flex: 1;
 			padding: hippie.$padding_basic;
 			line-height: hippie.$line_text_basic;
 		}
 	}
-
-	.area {
-		display: grid;
-		grid-gap: hippie.$space_basic;
-		flex: 1;
-		// grid-template-rows: repeat(2, 1fr);
-		// grid-template-columns: repeat(2, 1fr);
-		grid-template-areas: "a a";
-		grid-auto-rows: 1fr;
-		grid-auto-columns: 1fr;
-		transition: hippie.$transition_best;
-
-		&:hover {
-			background-color: #999;
-		}
-
-		& > div {
-			// height: unset;
-			border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
-			border-style: dotted;
-			border-width: hippie.$width_border_8;
-			border-radius: hippie.$width_border_8;
-			padding: hippie.$space_basic;
-			background-color: rgb(hippie.$color_back_basic, .5);
-			// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
-			// background-color: gold;
-		}
-	}
-}
-
-#top {
-	position: fixed;
-	top: 0;
-	left: 0;
-	display: flex;
-	width: 100%;
-	height: $module_top_height;
-	background-color: rgb(0, 0, 0, .8);
-	z-index: hippie.$z_top;
-
-	div:last-child {
-		flex: 1;
-	}
-
-	p,
-	li {
-		color: #fff;
-	}
-
-	h1 a {
-		color: #000;
-	}
-
-	p,
-	li {
-		margin-top: 8px;
-		margin-bottom: 7px;
-		padding: 0 4px;
-		font-size: 12px;
-		line-height: 17px;
-	}
-
-	nav ul {
-		display: flex;
-		margin: 0 0 0 16px;
-	}
-
-	.brand {
-		height: 36px;
-		background-color: #fff;
-		margin: 0 0 0 128px;
-		padding: 7px 24px;
-		font-size: 16px;
-		line-height: 22px;
-		font-weight: bold;
-		text-align: center;
-	}
-
-	.state {
-		margin-right: 16px;
-		text-align: right;
-	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
new file mode 100755
index 0000000..bc4fbcf
--- /dev/null
+++ b/source/style/modules/ui/_new_module.scss
@@ -0,0 +1,99 @@
+@use "sass:color";
+
+@use "../../hippie-style/hippie";
+
+$module_top_height: 32px;
+$body_top_space: $module_top_height + hippie.$space_basic;
+
+.body_new {
+	@extend %flex_column;
+	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
+}
+
+.area {
+	transition: hippie.$transition_best;
+
+	&:hover {
+		background-color: #999;
+	}
+}
+
+.grid {
+	display: grid;
+	flex: 1;
+	// grid-template-rows: repeat(2, 1fr);
+	// grid-template-columns: repeat(2, 1fr);
+	grid-template-areas: "a a";
+	grid-auto-rows: 1fr;
+	grid-auto-columns: 1fr;
+}
+
+.item {
+	// height: unset;
+	border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
+	border-style: dotted;
+	border-width: hippie.$width_border_8;
+	border-radius: hippie.$width_border_8;
+	padding: hippie.$space_basic;
+	background-color: rgb(hippie.$color_back_basic, .5);
+	// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
+	// background-color: gold;
+}
+
+.float {
+	min-height: 50%;
+}
+
+#top {
+	position: fixed;
+	top: 0;
+	left: 0;
+	display: flex;
+	width: 100%;
+	height: $module_top_height;
+	background-color: rgb(0, 0, 0, .8);
+	z-index: hippie.$z_top;
+
+	div:last-child {
+		flex: 1;
+	}
+
+	p,
+	li {
+		color: #fff;
+	}
+
+	h1 a {
+		color: #000;
+	}
+
+	p,
+	li {
+		margin-top: 8px;
+		margin-bottom: 7px;
+		padding: 0 4px;
+		font-size: 12px;
+		line-height: 17px;
+	}
+
+	nav ul {
+		display: flex;
+		margin: 0 0 0 16px;
+	}
+
+	.brand {
+		height: 36px;
+		background-color: #fff;
+		margin: 0 0 0 128px;
+		padding: 7px 24px;
+		font-size: 16px;
+		line-height: 22px;
+		font-weight: bold;
+		text-align: center;
+	}
+
+	.state {
+		margin-right: 16px;
+		text-align: right;
+	}
+}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index f396598..8663bfc 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -4,6 +4,7 @@
 @use "hippie-style/hippie";
 
 @use "modules/ui/frame_module";
+@use "modules/ui/new_module";
 @use "modules/ui/drag_module";
 @use "modules/ui/form_module";
 @use "modules/ui/gallery_module";
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index 4ff5f5a..0d6c050 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -17,14 +17,12 @@
 		{% block title %}{% endblock -%}
 		{{ hippie.titlePostfix -}}
 	</title>
-
 	{% block meta -%}
 	{% render 'hippie/partials/meta.liquid' %}
 	{% endblock -%}
 	{% block links -%}
 	{% render 'hippie/partials/links.liquid' %}
 	{% endblock -%}
-	{% block style -%}{% endblock -%}
 	{% endblock -%}
 </head>