diff --git a/source/screens/demo/examples/ui/form.liquid b/source/screens/demo/examples/ui/form.liquid
new file mode 100644
index 0000000..492e191
--- /dev/null
+++ b/source/screens/demo/examples/ui/form.liquid
@@ -0,0 +1,56 @@
+---
+title: Form
+tags:
+- ui
+---
+{% assign bodyClass = "body_frame" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/frame-header.liquid' %}
+<header class="io">
+	<h1>Formulare</h1>
+	<button data-action="add">Hinzufügen</button>
+	<button data-action="change">Ändern</button>
+	<hr>
+</header>
+<form id="form" action="">
+	<div id="grid">
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+	</div>
+</form>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	const add = document.querySelector('[data-action=add]');
+	const change = document.querySelector('[data-action=change]');
+	const grid = document.getElementById('grid');
+
+	add.addEventListener('click', (e) => {
+		const item = document.createElement('div');
+
+		item.style.backgroundColor = '#f0f';
+		item.textContent = 'c'
+
+		grid.appendChild(item);
+	});
+
+	change.addEventListener('click', (e) => {
+		changeLayout(grid);
+	});
+
+	function changeLayout(grid) {
+		const currentTemplate = grid.style.gridTemplateColumns;
+
+		if (currentTemplate === 'repeat(4, 1fr)') {
+			grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
+		} else {
+			grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
+		}
+	}
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
deleted file mode 100644
index 2e6c088..0000000
--- a/source/screens/demo/examples/ui/form.njk
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Form
-tags: 
-  - ui
----
-{% extends "hippie/_app_frame.njk" %}
-
-{% block body %}
-	{{ io.frameHeader('title-bar') }}
-	<header class="io">
-		<h1>Formulare</h1>
-		<button data-action="add">Hinzufügen</button>
-		<button data-action="change">Ändern</button>
-		<hr>
-	</header>
-	<form id="form" action="">
-		<div id="grid">
-			<div>a</div>
-			<div>b</div>
-			<div>c</div>
-		</div>
-	</form>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script>
-		const add = document.querySelector('[data-action=add]');
-		const change = document.querySelector('[data-action=change]');
-		const grid = document.getElementById('grid');
-
-		add.addEventListener('click', (e) => {
-				const item = document.createElement('div');
-
-				item.style.backgroundColor = '#f0f';
-				item.textContent = 'c'
-				
-				grid.appendChild(item);
-		});
-
-		change.addEventListener('click', (e) => {
-				changeLayout(grid);
-		});
-
-		function changeLayout(grid) {
-			const currentTemplate = grid.style.gridTemplateColumns;
-
-			if (currentTemplate === 'repeat(4, 1fr)') {
-				grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
-			} else {
-				grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
-			}
-		}
-	</script>
-{% endblock %}
\ No newline at end of file