diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 7cda8b6..50efe38 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -69,7 +69,7 @@ function HippieFade(toggleElement, initState) {
 	const fragment = document.createDocumentFragment();
 	const overlay = document.createElement('div');
 
-	overlay.id = 'mouse_overlay';
+	overlay.id = 'mouse-overlay';
 
 	if (initState) {
 		overlay.classList.add('active');
diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid
index 2ea1d8d..ca72d3f 100644
--- a/source/screens/demo/components.liquid
+++ b/source/screens/demo/components.liquid
@@ -190,11 +190,11 @@ order: 3
 		<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
 		<h2>&lt;table&gt;</h2>
 		<h4>Varianten</h4>
-		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
 		<table class="width_full fix">
 			<thead>
 			<tr>
-				<th class="pre" scope="col"></th>
+				<th class="cell_pre" scope="col"></th>
 				<th scope="col">Kopfzeile</th>
 				<th scope="col">A</th>
 				<th scope="col">B</th>
@@ -202,27 +202,27 @@ order: 3
 			</thead>
 			<tbody>
 			<tr>
-				<td class="pre">Vorspalte</td>
+				<td class="cell_pre">Vorspalte</td>
 				<td>Eine</td>
 				<td></td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="pre">1</td>
+				<td class="cell_pre">1</td>
 				<td></td>
 				<td>erweiterte</td>
 				<td></td>
 			</tr>
 			<tr>
-				<td class="pre">2</td>
+				<td class="cell_pre">2</td>
 				<td></td>
 				<td></td>
 				<td>Tabelle</td>
 			</tr>
 			</tbody>
 		</table>
-		<pre class="pre_code"><code>table.width_full.striped.fix.free>tr>td*3</code></pre>
-		<table class="width_full striped fix free">
+		<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
+		<table class="width_full stripe fix free">
 			<tr>
 				<td>Tabelle</td>
 				<td></td>
@@ -244,7 +244,7 @@ order: 3
 				<td>Streifen</td>
 			</tr>
 		</table>
-		<pre class="pre_code"><code>table>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
+		<pre class="pre_code"><code>table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre>
 		<table>
 			<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
 			<thead>
@@ -278,22 +278,6 @@ order: 3
 			</tr>
 			</tfoot>
 		</table>
-		<pre class="pre_code"><code>table.width_full.fix>tr>td+td.ellipsis+td[style="width: 50%"]</code></pre>
-		<table class="width_full fix">
-			<tr>
-				<td>Index</td>
-				<td class="ellipsis">Zelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.</td>
-				<td style="width: 50%">Zelle mit Angabe der Breite.</td>
-			</tr>
-		</table>
-		<pre class="pre_code"><code>table.flexible>tr>td+td.truncate.ellipsis+td</code></pre>
-		<table class="flexible">
-			<tr>
-				<td>Index</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>
 	<article>
 		<h1 id="forms">Formulare</h1>
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid
index 93988bd..ac1de27 100644
--- a/source/screens/demo/examples/game/intro.liquid
+++ b/source/screens/demo/examples/game/intro.liquid
@@ -39,7 +39,7 @@ tags:
 	<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_overlay"></div>
+	<div class="mouse-overlay"></div>
 	<div class="hello">Hello World!</div>
 	<p class="hello">Only left mouse click or any key</p>
 </div>
diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid
index 4c68c5a..e11d3f8 100644
--- a/source/screens/demo/examples/start.liquid
+++ b/source/screens/demo/examples/start.liquid
@@ -9,7 +9,7 @@ tags:
 
 {% block body %}
 <main>
-	<form id="www_search" class="flex inline" action="https://duckduckgo.com/">
+	<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>
@@ -65,7 +65,7 @@ tags:
 		return base + '?' + params.toString();
 	}
 
-	document.getElementById('www_search').addEventListener('submit', function (e) {
+	document.getElementById('www-search').addEventListener('submit', function (e) {
 		e.preventDefault();
 		const query = document.getElementById('qrySearch').value.trim();
 
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
index 900a84b..96e72ea 100755
--- a/source/screens/demo/examples/ui/table.liquid
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -62,13 +62,12 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td><input class="input_io" name="number" type="text"></td>
-		<td><input class="input_io" name="name" type="text"></td>
+		<td class="rigid"></td>
+		<td></td>
 		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
@@ -81,7 +80,7 @@ tags:
 				<option value="hour">Hour(s)</option>
 			</select>
 		</td>
-		<td><input class="input_io" name="price" type="text"></td>
+		<td class="unit"></td>
 		<td class="unit"></td>
 		<td class="io">
 			<nav>
@@ -97,13 +96,13 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
 		<td class="rigid"></td>
 		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
 		<td>
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
@@ -131,44 +130,14 @@ tags:
 		<th scope="row"></th>
 		<td class="io">
 			<nav>
-				<input class="input_io" name="active" type="checkbox">
 				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
 			</nav>
 		</td>
 		<td class="pos-num"></td>
-		<td colspan="7">
+		<td class="rigid"></td>
+		<td colspan="6">
 			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
 		</td>
-		<td class="io">
-			<nav>
-				<button title="Delete"><i class="bi bi-trash"></i></button>
-			</nav>
-		</td>
-	</tr>
-</template>
-<template id="rowGroup">
-	<tr draggable="true" class="header">
-		<th scope="row"></th>
-		<td class="io">
-			<nav>
-				<input class="input_io" name="active" type="checkbox">
-				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
-				<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
-			</nav>
-		</td>
-		<td class="pos-num"></td>
-		<td colspan="7">Group</td>
-		<td class="io">
-			<nav>
-				<button title="Delete"><i class="bi bi-trash"></i></button>
-			</nav>
-		</td>
-	</tr>
-	<tr>
-		<th scope="row"></th>
-		<td></td>
-		<td class="pos-num"></td>
-		<td colspan="7">Content</td>
 		<td class="io">
 			<nav>
 				<button title="Event"><i class="bi bi-calendar-event"></i></button>
@@ -177,11 +146,40 @@ tags:
 			</nav>
 		</td>
 	</tr>
-	<tr class="footer">
+</template>
+<template id="rowGroup">
+	<tr draggable="true">
 		<th scope="row"></th>
-		<td></td>
+		<td class="io">
+			<nav>
+				<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
+				<button title="Expand"><i class="bi bi-arrows-expand"></i></button>
+			</nav>
+		</td>
 		<td class="pos-num"></td>
-		<td colspan="8">End</td>
+		<td class="rigid"></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</td>
+		<td><input name="amount" type="number"></td>
+		<td>
+			<select name="units">
+				<option value="">None</option>
+				<option value="piece">Piece(s)</option>
+				<option value="hour">Hour(s)</option>
+			</select>
+		</td>
+		<td class="unit"></td>
+		<td class="unit"></td>
+		<td class="io">
+			<nav>
+				<button title="Event"><i class="bi bi-calendar-event"></i></button>
+				<button title="Note"><i class="bi bi-journal"></i></button>
+				<button title="Delete"><i class="bi bi-trash"></i></button>
+			</nav>
+		</td>
 	</tr>
 </template>
 
@@ -228,7 +226,6 @@ tags:
 	tbodyPosition.addEventListener('click', (event) => {
 		const rows = tbodyPosition.querySelectorAll('tr');
 		const rowTarget = event.target.closest('tr');
-		const groupTarget = event.target.closest('[name="group"]');
 
 		if (rowTarget && event.button === 0) {
 			for (row of rows) {
@@ -237,33 +234,32 @@ tags:
 
 			rowTarget.classList.add('active');
 		}
-
-		if (groupTarget && event.button === 0) {
-			console.log('group');
-			let currentRow = groupTarget.closest('tr').nextElementSibling;
-
-			while (currentRow && !currentRow.classList.contains('footer')) {
-				currentRow.classList.toggle('di_none');
-				currentRow = currentRow.nextElementSibling;
-			}
-		}
 	});
 
 	for (let i = 0; i < 256; i++) {
-		const t = Math.random();
-		let type = undefined;
+		const clone = cloneRow();
+		const tr = clone.querySelector('tr');
+		const th = clone.querySelector('th');
+		const td = clone.querySelectorAll('td');
 
-		if (t < .2) {
-			type = 'default';
-		} else if (t >= .2 && t < .4) {
-			type = 'text';
-		} else if (t >= .4 && t < .5) {
-			type = 'group';
-		} else {
-			type = 'article';
-		}
+		const j = i % placeholderNames.length;
+		const k = randomIntFrom(0, placeholderContents.length - 1);
+		const amount = randomIntFrom(1, 100);
+		const price = randomFloatFrom(1, 10000, 2);
+		const sum = amount * price;
 
-		tbodyPosition.appendChild(cloneRow(i, type));
+		tr.setAttribute('data-id', i);
+		th.textContent = i + 1;
+		td[2].textContent = getRandomFormattedString();
+		td[3].textContent = placeholderNames[j];
+		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
+		td[4].firstElementChild.textContent = placeholderContents[k];
+		td[5].firstElementChild.value = amount;
+		td[5].firstElementChild.style.width = '4em';
+		td[7].textContent = currencyEuro.format(price);
+		td[8].textContent = currencyEuro.format(sum);
+
+		tbodyPosition.appendChild(clone);
 	}
 
 	const selectNum = document.getElementById('sltNum');
@@ -381,51 +377,11 @@ tags:
 		console.debug('Drop');
 	});
 
-	function cloneRow(index, type = 'article') {
-		const id = 'row' + capitalizeFirstLetter(type);
+	function cloneRow(type = 'default') {
+		type = 'row' + capitalizeFirstLetter(type);
 
-		const rowFragment = document.getElementById(id).content;
-		const tr = rowFragment.querySelector('tr');
-		const th = rowFragment.querySelector('th');
-		const td = rowFragment.querySelectorAll('td');
-
-		const j = index % placeholderNames.length;
-		const k = randomIntFrom(0, placeholderContents.length - 1);
-		const l = Math.random() > .2;
-		const amount = randomIntFrom(1, 100);
-		const price = randomFloatFrom(1, 10000, 2);
-		const sum = amount * price;
-
-		tr.setAttribute('data-id', index);
-		th.textContent = index + 1;
-		td[0].querySelector('[name="active"]').checked = l;
-		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
-
-		switch (type) {
-			case 'default':
-				td[2].firstElementChild.style.width = '9ch';
-				td[3].firstElementChild.style.width = '6ch';
-				td[4].firstElementChild.textContent = placeholderContents[k];
-				td[5].firstElementChild.value = amount;
-				td[5].firstElementChild.style.width = '4em';
-				td[7].firstElementChild.style.width = '8ch';
-				td[8].textContent = currencyEuro.format(sum);
-				break;
-			case 'article':
-				td[2].textContent = getRandomFormattedString();
-				td[3].textContent = placeholderNames[j];
-				td[4].firstElementChild.textContent = placeholderContents[k];
-				td[5].firstElementChild.value = amount;
-				td[5].firstElementChild.style.width = '4em';
-				td[7].textContent = currencyEuro.format(price);
-				td[8].textContent = currencyEuro.format(sum);
-				break;
-			case 'text':
-				td[2].firstElementChild.textContent = placeholderContents[k];
-				break;
-			default:
-				console.debug('No matching type found.');
-		}
+		const rowFragment = document.getElementById(type).content;
+		// TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen
 
 		return document.importNode(rowFragment, true);
 	}
@@ -439,22 +395,5 @@ tags:
 			th.textContent = i + 1;
 		}
 	}
-
-	function toggleGroup(headerRow) {
-		// Get the toggle icon
-		const icon = headerRow.querySelector('.toggle-icon');
-
-		// Get all rows after this header
-		let currentRow = headerRow.nextElementSibling;
-
-		// Toggle visibility of group rows until next header
-		while (currentRow && !currentRow.classList.contains('group-header')) {
-			currentRow.classList.toggle('hidden');
-			currentRow = currentRow.nextElementSibling;
-		}
-
-		// Toggle the icon rotation
-		icon.classList.toggle('collapsed');
-	}
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index b42c8cd..b4c5632 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984
+Subproject commit b4c56320060548dacde62639876c6aee72b297ea
diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss
index 564e8a3..031f7f7 100644
--- a/source/style/modules/_start.scss
+++ b/source/style/modules/_start.scss
@@ -5,7 +5,7 @@
 		@extend .sec_main_center;
 	}
 
-	#www_search {
+	#www-search {
 		input[type="text"] {
 			flex: 1;
 			padding: hippie.$padding_basic;
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index 9742af3..91182ad 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -9,7 +9,7 @@
 }
 
 .body_frame {
-	@extend %flex_column;
+	@extend %flex-column;
 
 	background-color: hippie.$color_back_basic;
 
@@ -27,7 +27,7 @@
 	}
 
 	main {
-		@extend %flex_row;
+		@extend %flex-row;
 
 		flex: 1;
 
@@ -53,7 +53,7 @@
 		}
 
 		section {
-			@extend %flex_column;
+			@extend %flex-column;
 			gap: 0;
 		}
 	}
@@ -66,12 +66,12 @@
 }
 
 #cli {
-	@extend %flex_column;
+	@extend %flex-column;
 
 	background-color: black;
 
 	#line {
-		@extend %flex_row;
+		@extend %flex-row;
 	}
 
 	#prompt {
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
index bc4fbcf..4e36346 100755
--- a/source/style/modules/ui/_new_module.scss
+++ b/source/style/modules/ui/_new_module.scss
@@ -6,7 +6,7 @@ $module_top_height: 32px;
 $body_top_space: $module_top_height + hippie.$space_basic;
 
 .body_new {
-	@extend %flex_column;
+	@extend %flex-column;
 	padding: $body_top_space hippie.$space_basic hippie.$space_basic;
 }
 
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 8663bfc..1266a3a 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -178,7 +178,7 @@ $space_gui_half: hippie.$space_half;
 		background-color: hippie.$color_back_basic;
 		transition: background-color 4s;
 
-		&:hover > .mouse_overlay {
+		&:hover > .mouse-overlay {
 			background-color: transparent !important;
 			transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
 		}