diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
new file mode 100755
index 0000000..88c59f4
--- /dev/null
+++ b/source/screens/demo/examples/ui/cli.njk
@@ -0,0 +1,36 @@
+---
+title: CLI
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_frame" %}
+
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<p>Previous return</p>
+	<textarea name="prompt" id="prompt"></textarea>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
new file mode 100755
index 0000000..6bdfc8c
--- /dev/null
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -0,0 +1,187 @@
+---
+title: GUI explorer
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_frame" %}
+
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<main class="io">
+		<aside class="io">
+			<nav>
+				<div>location-pane</div>
+				<ul class="vertical">
+					<li>
+						<a class="a_button" href="">
+							<span>Start/Home</span>
+							<i class="bi bi-pin-fill"></i>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>System</span>
+							<i class="bi bi-pin-fill"></i>
+						</a>
+					</li>
+				</ul>
+			</nav>
+			<hr>
+			<nav>
+				<ul class="vertical">
+					<li>
+						<a class="a_button" href="">
+							<span>💽 disc link</span>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>📁 folder link</span>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>🔗 location link</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
+		</aside>
+		<section>
+			<header class="io">
+				<nav>
+					<button title="back">
+						<i class="bi bi-caret-left"></i>
+					</button>
+					<button title="up">
+						<i class="bi bi-caret-up"></i>
+					</button>
+					<button title="forward">
+						<i class="bi bi-caret-right"></i>
+					</button>
+					<button title="reload">
+						<i class="bi bi-arrow-clockwise"></i>
+					</button>
+					<input placeholder="//" type="text">
+				</nav>
+				<nav>
+					<span>location-bar</span>
+					<hr class="vertical">
+					<button title="search">
+						<i class="bi bi-search"></i>
+					</button>
+					<input placeholder="*" type="text">
+				</nav>
+			</header>
+			<header class="io">
+				<nav>
+					<button title="add">
+						<i class="bi bi-plus-circle"></i>
+					</button>
+					<div class="spacer a"></div>
+					<button title="cut">
+						<i class="bi bi-scissors"></i>
+					</button>
+					<button title="copy">
+						<i class="bi bi-copy"></i>
+					</button>
+					<button title="paste">
+						<i class="bi bi-clipboard-check-fill"></i>
+					</button>
+					<div class="spacer b"></div>
+					<button title="delete">
+						<i class="bi bi-trash"></i>
+					</button>
+				</nav>
+				<hr class="vertical">
+				<nav>
+					<ul>
+						<li>
+							<button title="collapse">
+								<i class="bi bi-arrows-collapse"></i>
+							</button>
+						</li>
+						<li>
+							<button title="expand">
+								<i class="bi bi-arrows-expand-vertical"></i>
+							</button>
+						</li>
+					</ul>
+					<span>options-bar</span>
+				</nav>
+				<nav></nav>
+			</header>
+			<div id="content">
+				<table>
+					<thead>
+						<tr>
+							<th>name</th>
+							<th>date</th>
+							<th>type</th>
+							<th>size</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>folder</td>
+							<td>YYYY-MM-DD</td>
+							<td>folder</td>
+							<td>4KB</td>
+						</tr>
+						<tr>
+							<td>file</td>
+							<td>YYYY-MM-DD</td>
+							<td>folder</td>
+							<td>1B</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<footer class="io">
+				<nav>
+					<span>## items</span>
+					<span># selected (size)</span>
+					<span># type(s)</span>
+					<span># shared</span>
+				</nav>
+				<nav>
+					<span>status-bar</span>
+				</nav>
+			</footer>
+		</section>
+	</main>
+	<footer class="io">
+		<nav>
+			<button>mode</button>
+			<span>mode-bar</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button>action</button>
+		</nav>
+	</footer>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
deleted file mode 100755
index 924b613..0000000
--- a/source/screens/demo/examples/ui/settings.njk
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Settings
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_setting" %}
-
-{% extends "demo/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<div id="frame">
-		<header class="io">
-			<nav>
-				<button title="menu">
-					<i class="bi bi-three-dots"></i>
-				</button>
-				<span>title-bar</span>
-			</nav>
-			<nav>
-				<div class="spacer a"></div>
-				<button title="minimize">
-					<i class="bi bi-dash"></i>
-				</button>
-				<button title="maximize">
-					<i class="bi bi-fullscreen"></i>
-				</button>
-				<button title="close">
-					<i class="bi bi-x-square"></i>
-				</button>
-			</nav>
-		</header>
-		<main class="io">
-			<aside class="io">
-				<nav>
-					<div>location-pane</div>
-					<ul class="vertical">
-						<li>
-							<a class="a_button" href="">
-								<span>Start/Home</span>
-								<i class="bi bi-pin-fill"></i>
-							</a>
-						</li>
-						<li>
-							<a class="a_button" href="">
-								<span>System</span>
-								<i class="bi bi-pin-fill"></i>
-							</a>
-						</li>
-					</ul>
-				</nav>
-				<hr>
-				<nav>
-					<ul>
-						<li>
-							<label for="">label</label>
-							<input type="text">
-						</li>
-					</ul>
-				</nav>
-			</aside>
-			<section>
-				<header class="io">
-					<nav>
-						<button title="back">
-							<i class="bi bi-caret-left"></i>
-						</button>
-						<button title="up">
-							<i class="bi bi-caret-up"></i>
-						</button>
-						<button title="forward">
-							<i class="bi bi-caret-right"></i>
-						</button>
-						<button title="reload">
-							<i class="bi bi-arrow-clockwise"></i>
-						</button>
-						<input type="text">
-					</nav>
-					<nav>
-						<span>location-bar</span>
-						<hr class="vertical">
-						<button title="search">
-							<i class="bi bi-search"></i>
-						</button>
-						<input type="text">
-					</nav>
-				</header>
-				<header class="io">
-					<nav>
-						<button title="add">
-							<i class="bi bi-plus-circle"></i>
-						</button>
-						<div class="spacer a"></div>
-						<button title="cut">
-							<i class="bi bi-scissors"></i>
-						</button>
-						<button title="copy">
-							<i class="bi bi-copy"></i>
-						</button>
-						<button title="paste">
-							<i class="bi bi-clipboard-check-fill"></i>
-						</button>
-						<div class="spacer b"></div>
-						<button title="delete">
-							<i class="bi bi-trash"></i>
-						</button>
-					</nav>
-					<hr class="vertical">
-					<nav>
-						<ul>
-							<li>
-								<button title="collapse">
-									<i class="bi bi-arrows-collapse"></i>
-								</button>
-							</li>
-							<li>
-								<button title="expand">
-									<i class="bi bi-arrows-expand-vertical"></i>
-								</button>
-							</li>
-						</ul>
-						<span>options-bar</span>
-					</nav>
-					<nav></nav>
-				</header>
-				section</section>
-		</main>
-		<footer class="io">
-			<nav>
-				<span>state</span>
-				<div class="spacer a"></div>
-				<button>action</button>
-			</nav>
-		</footer>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tui.njk b/source/screens/demo/examples/ui/tui.njk
new file mode 100755
index 0000000..9ba3fe0
--- /dev/null
+++ b/source/screens/demo/examples/ui/tui.njk
@@ -0,0 +1,37 @@
+---
+title: TUI
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_frame" %}
+
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<main class="io">
+	</main>
+	{{ io.frameFooter('mode-bar') }}
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script src="{{ pageBase }}js/app.js"></script>
+	<script></script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/hippie-style b/source/style/hippie-style
index 8ffc1b8..36919ca 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit 8ffc1b8346977486044443e0c7dba0bead25b9d8
+Subproject commit 36919cae478551ac284fa05ebddf3c5b5e040154
diff --git a/source/templates/hippie/macros/_io.njk b/source/templates/hippie/macros/_io.njk
new file mode 100644
index 0000000..36a3b9e
--- /dev/null
+++ b/source/templates/hippie/macros/_io.njk
@@ -0,0 +1,35 @@
+{% macro frameHeader(title) %}
+	<header class="io">
+		<nav>
+			<button title="menu">
+				<i class="bi bi-three-dots"></i>
+			</button>
+			<span>{{ title }}</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button title="minimize">
+				<i class="bi bi-dash"></i>
+			</button>
+			<button title="maximize">
+				<i class="bi bi-fullscreen"></i>
+			</button>
+			<button title="close" data-action="close">
+				<i class="bi bi-x-square"></i>
+			</button>
+		</nav>
+	</header>
+{% endmacro %}
+
+{% macro frameFooter(title) %}
+	<footer class="io">
+		<nav>
+			<button>mode</button>
+			<span>{{ title }}</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button>action</button>
+		</nav>
+	</footer>
+{% endmacro %}
\ No newline at end of file