diff --git a/source/screens/demo/examples/ui/explorer.liquid b/source/screens/demo/examples/ui/explorer.liquid
new file mode 100644
index 0000000..f8e66fa
--- /dev/null
+++ b/source/screens/demo/examples/ui/explorer.liquid
@@ -0,0 +1,145 @@
+---
+title: Explorer
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io">
+	<aside class="io">
+		<nav>
+			<span>location-pane</span>
+			<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>
+		{% render 'hippie/partials/frame-status.liquid' %}
+	</section>
+</main>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% 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
deleted file mode 100755
index c54ea0a..0000000
--- a/source/screens/demo/examples/ui/explorer.njk
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: GUI explorer
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	{{ io.frameHeader('title-bar') }}
-	<main class="io">
-		<aside class="io">
-			<nav>
-				<span>location-pane</span>
-				<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>
-			{{ io.statusBar() }}
-		</section>
-	</main>
-	{{ io.frameFooter('mode-bar') }}
-{% endblock %}
\ No newline at end of file