diff --git a/.jshintrc b/.jshintrc
index 7fe438c..134e601 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -1,85 +1,33 @@
 {
-	"maxerr": 50,
 	"bitwise": true,
-	"camelcase": false,
-	"curly": false,
+	"curly": true,
+	"devel": true,
 	"eqeqeq": true,
+	"esversion": 9,
 	"forin": true,
 	"freeze": true,
-	"immed": false,
-	"latedef": true,
-	"newcap": true,
+	"jquery": true,
 	"noarg": true,
 	"noempty": true,
-	"nonbsp": true,
-	"nonew": false,
-	"plusplus": false,
-	"quotmark": true,
-	"undef": true,
-	"unused": true,
 	"strict": true,
-	"maxparams": false,
-	"maxdepth": false,
-	"maxstatements": false,
-	"maxcomplexity": false,
-	"maxlen": false,
-	"varstmt": false,
-	"asi": false,
-	"boss": false,
-	"debug": false,
-	"eqnull": false,
-	"esversion": 9,
-	"moz": false,
-	"evil": false,
-	"expr": false,
-	"funcscope": false,
-	"globalstrict": false,
-	"iterator": false,
-	"lastsemic": false,
-	"laxbreak": false,
-	"laxcomma": false,
-	"loopfunc": false,
-	"multistr": false,
-	"noyield": false,
-	"notypeof": false,
-	"proto": false,
-	"scripturl": false,
-	"shadow": false,
-	"sub": false,
-	"supernew": false,
-	"validthis": false,
+	"undef": true,
+	"unused": false,
 	"browser": true,
-	"browserify": false,
-	"couch": false,
-	"devel": true,
-	"dojo": false,
-	"jasmine": false,
-	"jquery": true,
-	"mocha": true,
-	"mootools": false,
-	"node": false,
-	"nonstandard": false,
-	"phantom": false,
-	"prototypejs": false,
-	"qunit": false,
-	"rhino": false,
-	"shelljs": false,
-	"typed": false,
-	"worker": false,
-	"wsh": false,
-	"yui": false,
 	"globals": {
-		"debugOn": true,
+		"HIPPIE": false,
 		"hippie": true,
 		"viewHover": true,
 		"basicEase": true,
+		"debugOn": true,
 		"TimeDisplay": true,
 		"DateDisplay": true,
-		"checkButtonAndTarget": true,
-		"getClosestEdgeToElement": true,
-		"getClosestEdgeToMouse": true,
-		"centerElementUnderCursor": true,
-		"setAttributesAccordingToPosition": true,
+		"checkButtonAndTarget": false,
+		"getClosestEdgeToElement": false,
+		"getClosestEdgeToMouse": false,
+		"centerElementUnderCursor": false,
+		"setAttributesAccordingToPosition": false,
+		"randomIntFrom": false,
+		"replaceLineBreaks": false,
 		"HippieTaskBar": true
 	}
 }
diff --git a/source/code/drag.js b/source/code/drag.js
index 01a489a..7bdd8e9 100644
--- a/source/code/drag.js
+++ b/source/code/drag.js
@@ -113,15 +113,3 @@ class NewDiv {
     space.appendChild(this.element);
   }
 }
-
-// Function to generate a random color
-function getRandomColor() {
-  const letters = '0123456789ABCDEF';
-  let color = '#';
-
-  for (let i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-
-  return color;
-}
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index e5a26b8..f00f364 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -405,6 +405,60 @@ function setAttributesAccordingToPosition(element, position, attributes) {
 	});
 }
 
+/**
+ * Gibt eine Zahl zwischen <min> und <max> aus.
+ * Die Werte <min> und <max> sind dabei mit eingeschlossen.
+ * Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
+ *
+ * @param {number} min
+ * @param {number} max
+ * @param {number} pos
+ * @returns {number}
+ */
+function randomIntFrom(min, max, pos = 0) {
+	pos = Math.pow(10, pos);
+	min = Math.ceil(min);
+	max = Math.floor(max);
+
+	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
+}
+
+function randomFloatFrom(min, max, dec = 0) {
+	dec = Math.pow(10, dec);
+
+	return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
+}
+
+/**
+ * Ersetzt \n durch <br>.
+ *
+ * @param {string} text
+ * @returns {string}
+ */
+function replaceLineBreaks(text) {
+	if (text === '' || !text.includes('\n')) {
+		return text;
+	}
+
+	return text.split('\n').join('<br>');
+}
+
+/**
+ * Gibt eine zufällige Farbe als HEX-Wert aus.
+ *
+ * @returns {string}
+ */
+function getRandomColor() {
+	const letters = '0123456789ABCDEF';
+	let color = '#';
+
+	for (let i = 0; i < 6; i++) {
+		color += letters[Math.floor(Math.random() * 16)];
+	}
+
+	return color;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
diff --git a/source/code/intro.js b/source/code/intro.js
index 341df5e..bff5a87 100644
--- a/source/code/intro.js
+++ b/source/code/intro.js
@@ -272,24 +272,6 @@ function loadCore() {
 	});
 }
 
-/**
- * Gibt eine Zahl zwischen <min> und <max> aus.
- * Die Werte <min> und <max> sind dabei mit eingeschlossen.
- * Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
- * 
- * @param {number} min 
- * @param {number} max 
- * @param {number} pos 
- * @returns {number}
- */
-function randomIntFrom(min, max, pos = 0) {
-	pos = Math.pow(10, pos);
-	min = Math.ceil(min);
-	max = Math.floor(max);
-
-	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
-}
-
 /**
  * Erstellt Kontext für hint-Objekt und ermöglicht das Entfernen des Ereignis.
  */
diff --git a/source/screens/demo/examples/ui/drag.liquid b/source/screens/demo/examples/ui/drag.liquid
index fe8ef43..7b46674 100755
--- a/source/screens/demo/examples/ui/drag.liquid
+++ b/source/screens/demo/examples/ui/drag.liquid
@@ -22,6 +22,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
+<script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/drag.js"></script>
 <script>
 	// Get the space element
diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid
new file mode 100755
index 0000000..eefa18c
--- /dev/null
+++ b/source/screens/demo/examples/ui/table.liquid
@@ -0,0 +1,125 @@
+---
+title: Table
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io">
+	<section>
+		<header class="io">
+			<nav>
+				<button title="add">
+					<i class="bi bi-plus-circle"></i>
+				</button>
+			</nav>
+			<nav></nav>
+		</header>
+		<table>
+			<thead>
+			<tr>
+				<th scope="col" title="Index">#</th>
+				<th scope="col"></th>
+				<th scope="col" title="Position">#</th>
+				<th scope="col">Number</th>
+				<th scope="col">Name</th>
+				<th scope="col">Description</th>
+				<th scope="col">Price</th>
+				<th scope="col"></th>
+			</tr>
+			</thead>
+			<tbody></tbody>
+		</table>
+		{% render 'hippie/partials/frame-status.liquid' %}
+	</section>
+</main>
+<template id="default-row">
+	<tr>
+		<th scope="row"></th>
+		<td class="io">
+			<nav>
+				<button title="drag"><i class="bi bi-grip-horizontal"></i></button>
+				<button title="expand"><i class="bi bi-arrows-expand-vertical"></i></button>
+			</nav>
+		</td>
+		<td></td>
+		<td></td>
+		<td></td>
+		{% comment %}<td class="ellipsis"></td>{% endcomment %}
+		<td>
+			<textarea class="fit" name="description" cols="64" rows="2"></textarea>
+		</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>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	const placeholderNames = [
+		'Mac',
+		'Sonic',
+		'Furiosa',
+		'Leia',
+		'Frisbee',
+		'Ripley',
+		'Motoko',
+		'Lupin',
+		'Yoda',
+		'Spike',
+		'Obelix',
+		'Samus',
+		'Plisken'
+	];
+	const placeholderAttributes = [
+		'blue',
+		'tall',
+		'clever',
+		'true'
+	];
+	const placeholderContents = [
+		'Description - At vero eos et accusam et justo duo dolores et ea rebum.',
+		'',
+		"Content with linebreaks - \nPhasellus finibus mollis diam non posuere. Vestibulum porttitor volutpat consectetur. Duis neque sapien, tincidunt ac odio vel, laoreet ultricies ligula. Suspendisse erat eros, volutpat vel fringilla at, placerat ac nisi. \nNulla arcu elit, facilisis egestas risus ac, aliquet varius sapien. Sed et nisi fringilla nibh ultrices sagittis ac in nisl. \nPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porta lectus ac pharetra feugiat. In ligula nunc, porttitor non arcu vel, feugiat tempor mi. Aenean pellentesque ipsum ac ligula pulvinar, vel auctor diam vehicula. Sed at arcu lacus.",
+		'Very long content - Suspendisse lectus orci, convallis vitae sapien et, iaculis cursus magna. Pellentesque ultrices sodales eros eget vehicula. Aliquam tincidunt nulla non finibus ullamcorper. Ut accumsan nisi non aliquam fermentum. Vestibulum sit amet purus eu dolor vulputate pretium in eget libero. Donec vitae quam in leo eleifend semper. Cras mollis orci augue, vitae aliquam quam consequat quis. Donec sed nisi sed nulla ultricies ultricies quis ac erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris euismod mollis neque sit amet varius. In malesuada nibh faucibus orci tincidunt, in elementum sapien pretium. Cras vel urna felis. Proin cursus tempor egestas. Nulla facilisis justo enim. Mauris fermentum, tortor a malesuada facilisis, leo tortor aliquam elit, sed sodales ipsum tortor et tellus.',
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis condimentum quam, bibendum tristique odio.'
+	];
+
+	const tbody = document.querySelector('main.io section > table');
+	const template = document.querySelector('#default-row');
+
+	const currencyEuro = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
+
+	for (let i = 0; i < 256; i++) {
+		const clone = document.importNode(template.content, true);
+		const tr = clone.querySelector('tr');
+		const th = clone.querySelector('th');
+		const td = clone.querySelectorAll('td');
+
+		const j = i % placeholderNames.length;
+		const k = randomIntFrom(0, placeholderContents.length - 1);
+
+		tr.setAttribute('data-id', i);
+		th.textContent = i + 1;
+		td[3].textContent = placeholderNames[j];
+		// td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
+		td[4].firstElementChild.textContent = placeholderContents[k];
+		// td[5].textContent = randomIntFrom(1, i).toString();
+		td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
+
+		tbody.appendChild(clone);
+	}
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 4e4f881..0623e81 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483
+Subproject commit 0623e818a49176ca7516a88943e07a882ba5262d
diff --git a/source/style/modules/ui/_gallery_module.scss b/source/style/modules/ui/_gallery_module.scss
index 4f8a233..06803fb 100644
--- a/source/style/modules/ui/_gallery_module.scss
+++ b/source/style/modules/ui/_gallery_module.scss
@@ -1,6 +1,6 @@
 @use "../../hippie-style/hippie";
 
-.gallery {
+main.io section > .gallery {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: left;
diff --git a/source/style/modules/ui/_table_module.scss b/source/style/modules/ui/_table_module.scss
new file mode 100644
index 0000000..51896f4
--- /dev/null
+++ b/source/style/modules/ui/_table_module.scss
@@ -0,0 +1,17 @@
+@use "../../hippie-style/hippie";
+
+main.io section > table {
+	table-layout: auto;
+	width: 100%;
+	margin: 0;
+	background-color: hippie.$color_back_io;
+
+	thead > tr > th:first-child {
+		width: 1%;
+	}
+
+	tr > th:first-child {
+		text-align: center;
+	}
+}
+
diff --git a/source/style/ui.scss b/source/style/ui.scss
index da6ecf7..861adf8 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -10,6 +10,7 @@
 @use "modules/ui/game_module";
 @use "modules/ui/gallery_module";
 @use "modules/ui/windows_module";
+@use "modules/ui/table_module";
 
 $color_gui_back: hippie.$color_dark;
 $space_gui_half: hippie.$space_half;