diff --git a/source/screens/demo/examples/intro.njk b/source/screens/demo/examples/intro.njk
index 07eb1a1..9eb0ebd 100644
--- a/source/screens/demo/examples/intro.njk
+++ b/source/screens/demo/examples/intro.njk
@@ -7,7 +7,7 @@ tags:
 {% set pageId = "init" %}
 {% set pageClass = "html_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 {% block title %}
 	{{ title }}
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index b943fee..3d82a7b 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -7,7 +7,7 @@ tags:
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 
 {% block title %}{{ title }}
 {% endblock %}
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index 29ab5bd..83ac65d 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -6,7 +6,7 @@ tags:
 {% set pageClass = "html_ui" %}
 {% set bodyClass = "body_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 
 {% block title %}{{ title }}
 {% endblock %}
diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk
index 1712214..4bd84c1 100644
--- a/source/screens/demo/examples/ui/index.njk
+++ b/source/screens/demo/examples/ui/index.njk
@@ -7,7 +7,7 @@ tags:
 
 {% set pageClass = "html_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index ba2e4c0..4b5ae8f 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -7,7 +7,7 @@ tags:
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_header.njk" as header %}
 
 {% block title %}{{ title }}
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
new file mode 100755
index 0000000..c3ba4b4
--- /dev/null
+++ b/source/style/modules/ui/_frame_module.scss
@@ -0,0 +1,93 @@
+@mixin nav-spacer($name, $size, $orientation) {
+	.spacer.#{$name} {
+		width: $size;
+	}
+}
+
+.body_frame {
+	@extend %flex-column;
+	@extend .body_ui;
+
+	background-color: $color_back_basic;
+
+	position: relative;
+	height: 100%;
+
+	header,
+	aside,
+	footer {
+		border: 1px solid transparent;
+	}
+
+	&>header {
+		background-color: rgba(0, 0, 0, .1);
+	}
+
+	main {
+		@extend %flex-row;
+
+		flex: 1;
+
+		aside {
+			// background-color: rgba(255, 255, 255, .1);
+		}
+
+		section {
+
+			&>header,
+			&>footer {
+				background-color: transparentize($color_back_io, .5);
+
+				&:hover {
+					background-color: $color_back_io;
+				}
+			}
+		}
+
+		section,
+		section>div {
+			flex: 1;
+		}
+
+		section {
+			@extend %flex-column;
+			gap: 0;
+		}
+	}
+}
+
+#content {
+	background-color: $color_back_io;
+
+	&>table {
+		width: 100%;
+		margin: 0;
+		border: 0;
+
+		tr:hover td {
+			background-color: $color_highlight_basic;
+		}
+
+		th {
+			border: 1px solid $color_border_io;
+		}
+
+		td {
+			border-width: 0 1px;
+			border-style: solid;
+			border-color: $color_border_io;
+		}
+	}
+}
+
+.io {
+	.spacer {
+		margin: 0;
+		border: $border_dotted;
+		padding: 0;
+		opacity: .25;
+	}
+
+	@include nav-spacer('a', $space_double, false);
+	@include nav-spacer('b', $space_small, false);
+}
\ No newline at end of file
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
deleted file mode 100755
index 9b41e4c..0000000
--- a/source/style/modules/ui/_settings_module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@mixin nav-spacer($name, $size, $orientation) {
-	.spacer.#{$name} {
-		width: $size;
-	}
-}
-
-.body_setting {
-	@extend .body_ui;
-
-	background-color: $color_back_basic;
-}
-
-#frame {
-	@extend %flex-column;
-
-	position: relative;
-	height: 100%;
-
-	header,
-	aside,
-	footer {
-		border: 1px solid transparent;
-	}
-
-	&>header {
-		background-color: rgba(0, 0, 0, .1);
-	}
-
-	main {
-		@extend %flex-row;
-
-		flex: 1;
-
-		aside {
-			background-color: rgba(255, 255, 255, .1);
-		}
-
-		section {
-			flex: 1;
-		}
-	}
-}
-
-.io {
-	.spacer {
-		margin: 0;
-		border: $border_dotted;
-		padding: 0;
-		opacity: .25;
-	}
-
-	@include nav-spacer('a', $space_double, false);
-	@include nav-spacer('b', $space_small, false);
-}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index efe343b..28d28cc 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -191,7 +191,7 @@ $color_gui_back: $color_dark;
 	font-family: $family_text_mono;
 }
 
+@import "modules/ui/frame_module";
 @import "modules/ui/new_module";
-@import "modules/ui/settings_module";
 @import "modules/ui/drag_module";
 @import "modules/ui/form_module";
\ No newline at end of file
diff --git a/source/templates/demo/_app.njk b/source/templates/hippie/_app.njk
similarity index 89%
rename from source/templates/demo/_app.njk
rename to source/templates/hippie/_app.njk
index 73a8dd0..d48d4bf 100755
--- a/source/templates/demo/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -1,4 +1,4 @@
-<!-- demo.app.template -->
+<!-- app.template -->
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
 	<head>
@@ -9,7 +9,7 @@
 				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
 			{% block meta %}
-				{% include "demo/partials/_meta.njk" %}
+        {% include "hippie/partials/_head_meta.njk" %}
 				<base href="/">
 			{% endblock %}