diff --git a/source/screens/demo/examples/ui/cli.liquid b/source/screens/demo/examples/ui/cli.liquid
new file mode 100644
index 0000000..18f4cd4
--- /dev/null
+++ b/source/screens/demo/examples/ui/cli.liquid
@@ -0,0 +1,60 @@
+---
+title: CLI
+tags:
+- ui
+---
+{% assign bodyClass = "body_cli" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+<div id="cli">
+	<div id="history">
+		<pre>Previous prompt</pre>
+	</div>
+	<div id="line">
+		<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
+		<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
+	</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	function resizeTextArea(textarea) {
+		const {style, value} = textarea;
+
+		style.height = style.minHeight = 'auto';
+		style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
+		style.height = `${textarea.scrollHeight}px`;
+	}
+
+	const textarea = document.getElementById('prompt');
+
+	document
+		.body
+		.addEventListener('click', () => {
+			textarea.focus();
+		});
+
+	textarea.addEventListener('input', () => {
+		resizeTextArea(textarea);
+	});
+
+	window.addEventListener("keydown", (event) => {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+
+			const p = document.createElement("pre");
+
+			p.textContent = event.target.value;
+			document
+				.getElementById("history")
+				.appendChild(p);
+			// window.scrollTo(0, document.body.scrollHeight);
+
+			event.target.value = '';
+		}
+	});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk
deleted file mode 100755
index dc0800f..0000000
--- a/source/screens/demo/examples/ui/cli.njk
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: CLI
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_cli" %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	<div id="cli">
-		<div id="history">
-			<pre>Previous prompt</pre>
-		</div>
-		<div id="line">
-			<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
-			<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
-		</div>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script>
-		function resizeTextArea(textarea) {
-			const {style, value} = textarea;
-
-			style.height = style.minHeight = 'auto';
-			style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
-			style.height = `${textarea.scrollHeight}px`;
-		}
-
-		const textarea = document.getElementById('prompt');
-
-		document
-			.body
-			.addEventListener('click', () => {
-				textarea.focus();
-			});
-
-		textarea.addEventListener('input', () => {
-			resizeTextArea(textarea);
-		});
-
-		window.addEventListener("keydown", (event) => {
-			if (event.key === 'Enter' && !event.shiftKey) {
-				event.preventDefault();
-
-				const p = document.createElement("pre");
-
-				p.textContent = event.target.value;
-				document
-					.getElementById("history")
-					.appendChild(p);
-				// window.scrollTo(0, document.body.scrollHeight);
-
-				event.target.value = '';
-			}
-		});
-	</script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/tui.liquid b/source/screens/demo/examples/ui/tui.liquid
new file mode 100644
index 0000000..cb2434f
--- /dev/null
+++ b/source/screens/demo/examples/ui/tui.liquid
@@ -0,0 +1,13 @@
+---
+title: TUI
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<main class="io"></main>
+{% render 'hippie/partials/frame-mode.liquid' %}
+{% 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
deleted file mode 100755
index 8fc0e31..0000000
--- a/source/screens/demo/examples/ui/tui.njk
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: TUI
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	{{ io.frameHeader('title-bar') }}
-	<main class="io"></main>
-	{{ io.frameFooter('mode-bar') }}
-{% endblock %}
\ No newline at end of file