diff --git a/source/screens/demo/os.njk b/source/screens/demo/os.njk
deleted file mode 100644
index 43baa82..0000000
--- a/source/screens/demo/os.njk
+++ /dev/null
@@ -1,145 +0,0 @@
-<!-- os.page -->
-{% set pageId = "os" %}
-
-{% extends "demo/_extended.njk" %}
-
-{% block title %}OS{% endblock %}
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block main %}
-<div class="h_full_view">
-  <div class="flex_wrap">
-    <button class="demo__button_32"></button>
-    <button class="demo__button_32"></button>
-    <button class="demo__button_32"></button>
-    <button class="demo__button_32"></button>
-    <button class="demo__button_32"></button>
-    <button class="demo__button_32"></button>
-  </div>
-  <div class="flex">
-    <div class="flex_child">
-      <!-- (nav>ul.list_data>(li>a>img+p{Punkt $})*6)*2 -->
-      <nav>
-        <ul class="list_files">
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 1</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 2</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 3</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 4</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 5</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 6</p>
-          </a></li>
-        </ul>
-      </nav>
-      <nav>
-        <ul class="list_files">
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 1</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 2</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 3</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 4</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 5</p>
-          </a></li>
-          <li><a href="">
-            <img src="" alt="">
-            <p>Punkt 6</p>
-          </a></li>
-        </ul>
-      </nav>
-    </div>
-    <div class="flex_child_one flex_row">
-      <!-- div.flex_child.box_file_wrp>(div.box_file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex_child>table.table_file_simple>(tr>td>img^+td{Objektname $}+td.cell_file_path{Objektpfad $})*2 -->
-      <div class="flex_child box_file_wrp">
-        <div class="flex_wrap box_file_tile">
-          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box_flex_one">
-            <p>Dateiname 1</p>
-            <p>Auszeichnung 1</p>
-          </div>
-        </div>
-        <div class="flex_wrap box_file_tile">
-          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box_flex_one">
-            <p>Dateiname 2</p>
-            <p>Auszeichnung 2</p>
-          </div>
-        </div>
-        <div class="flex_wrap box_file_tile">
-          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box_flex_one">
-            <p>Dateiname 3</p>
-            <p>Auszeichnung 3</p>
-          </div>
-        </div>
-        <div class="flex_wrap box_file_tile">
-          <div class="flex_child"><img src="./art/icon_default.svg" alt=""></div>
-          <div class="box_flex_one">
-            <p>Dateiname 4</p>
-            <p>Auszeichnung 4</p>
-          </div>
-        </div>
-      </div>
-      <div class="flex_child_one">
-        <table class="table_file_simple">
-          <tr>
-            <td><img src="" alt=""></td>
-            <td>Objektname 1</td>
-            <td class="cell_file_path">Objektpfad 1</td>
-          </tr>
-          <tr>
-            <td><img src="" alt=""></td>
-            <td>Objektname 2</td>
-            <td class="cell_file_path">Objektpfad 2</td>
-          </tr>
-        </table>
-      </div>
-      <div class="flex_child">
-        <p>Status</p>
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block script %}
-{{ super() }}
-<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
-<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
-<script type="text/javascript">
-// Page specific
-// ------------------------------------------------------------------------------
-$( document ).ready(function() {
-});
-</script>
-{% endblock %}
diff --git a/source/screens/demo/tests.njk b/source/screens/demo/tests.njk
deleted file mode 100644
index d2da875..0000000
--- a/source/screens/demo/tests.njk
+++ /dev/null
@@ -1,139 +0,0 @@
-<!-- tests.screen -->
-{% set pageId = "tests" %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "demo/_default.njk" %}
-{% import "demo/macros/_nav.njk" as nav %}
-
-{% block title %}Tests{% endblock %}
-{% block head %}
-{{ super() }}
-<style>
-#error {
-	border: 1px solid #FFFF66;
-	background-color: #FFFFCC;
-	display: inline-block;
-	margin-left: 10px;
-	padding: 3px;
-	display: none;
-}
-</style>
-{% endblock %}
-
-{% block body %}
-<h2>Caps Lock</h2>
-<div id="capsCheck">
-	<input type="password" name="txtPassword" onkeypress="capLock(event)" />
-	<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
-	<form action="">
-		<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
-	</form>
-</div>
-
-<h2>Navigation</h2>
-{{ nav.main(data.demoadditionallinks, 'Tests') }}
-
-<div id="divGame">
-	<h2>Number Game</h2>
-	<p class="guesses"></p>
-	<p class="lastResult"></p>
-	<p class="lowOrHi"></p>
-	<label for="guessField">Guess</label>
-	<input type="text" id="guessField" class="guessField">
-	<input type="submit" value="Submit guess" class="guessSubmit">
-</div>
-{% endblock %}
-
-{% block script %}
-{{ super() }}
-<script src="../js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
-<script>
-// Page specific
-// ------------------------------------------------------------------------------
-assetsLoaded = true;
-logPerf('Assets loaded.');
-
-$( document ).ready(function() {
-	logPerf('JQ document ready event fired.');
-
-	let ranNum = Math.floor(Math.random() * 100) + 1;
-
-	const guesses = $('.guesses');
-	const lastResult = $('.lastResult');
-	const lowOrHi = $('.lowOrHi');
-
-	const guessField = $('.guessField');
-	const guessSubmit = $('.guessSubmit');
-
-	let guessCount = 1;
-	let resetButton;
-
-	function checkGuess() {
-		console.log('Random:', ranNum);
-		let userGuess = Number(guessField.value);
-		if (guessCount === 1) {
-			// guesses.get(0).textContent = 'Previous guesses: ';
-			guesses.html('Previous guesses: ');
-		}
-		// guesses[0].textContent += userGuess + ', ';
-		guesses.get(0).textContent += userGuess + ', ';
-		// var g = guesses.html();
-		// guesses.html(g += userGuess + ', ');
-
-	}
-
-	// checkGuess();
-
-});
-
-function capLock(e) {
-	kc = e.keyCode?e.keyCode:e.which;
-	sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
-	if (((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
-	document.getElementById('divMayus').style.visibility = 'visible';
-	else
-	document.getElementById('divMayus').style.visibility = 'hidden';
-}
-
-function capsDetect() {
-	var body = document.getElementsByTagName('body')[0];
-	var isShiftPressed = false;
-	var isCapsOn = false;
-	var capsWarning = document.getElementById('error');
-	body.addEventListener('keydown', function(e) {
-		var keyCode = e.keyCode ? e.keyCode : e.which;
-		if (keyCode === 16) {
-			isShiftPressed = true;
-		}
-	});
-	body.addEventListener('keyup', function(e) {
-		var keyCode = e.keyCode ? e.keyCode : e.which;
-		if (keyCode === 16) {
-			isShiftPressed = false;
-		}
-		if (keyCode === 20) {
-			if (isCapsOn) {
-				isCapsOn = false;
-				capsWarning.style.display = 'none';
-			} else {
-				isCapsOn = true;
-				capsWarning.style.display = 'inline-block';
-			}
-		}
-	});
-	body.addEventListener('keypress', function(e) {
-		var keyCode = e.keyCode ? e.keyCode : e.which;
-		if (keyCode <= 40)
-		return;
-		if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
-			isCapsOn = true;
-			capsWarning.style.display = 'inline-block';
-		} else {
-			capsWarning.style.display = 'none';
-		}
-	});
-}
-
-capsDetect();
-</script>
-{% endblock %}
diff --git a/source/templates/demo/data.json b/source/templates/demo/data.json
index 9301bbd..4b968fb 100644
--- a/source/templates/demo/data.json
+++ b/source/templates/demo/data.json
@@ -1,58 +1,50 @@
-{
-  "demoadditionallinks": [
-    {
-      "href": "/demo.html",
-      "text": "Index"
-    },
-    {
-      "href": "/demo/intro.html",
-      "text": "Intro"
-    },
-    {
-      "href": "/demo/elements.html",
-      "text": "Elements"
-    },
-    {
-      "href": "/demo/examples.html",
-      "text": "Examples"
-    },
-    {
-      "href": "/demo/tests.html",
-      "text": "Tests"
-    }
-  ],
-  "demolinks": [
-    {
-      "href": "demo/blank.html",
-      "text": "Blank"
-    },
-    {
-      "href": "demo/maintenance.html",
-      "text": "Maintenance"
-    },
-    {
-      "href": "demo/error/304.html",
-      "text": "304"
-    },
-    {
-      "href": "demo/error/404.html",
-      "text": "404"
-    },
-    {
-      "href": "demo/error/403.html",
-      "text": "403"
-    },
-    {
-      "href": "demo/error/400.html",
-      "text": "400"
-    },
-    {
-      "href": "demo/error/500.html",
-      "text": "500"
-    },
-    {
-      "href": "demo/os.html",
-      "text": "OS"
-    }
-  ]
-}
+{
+	"demoadditionallinks": [
+		{
+			"href": "/demo.html",
+			"text": "Index"
+		},
+		{
+			"href": "/demo/intro.html",
+			"text": "Intro"
+		},
+		{
+			"href": "/demo/elements.html",
+			"text": "Elements"
+		},
+		{
+			"href": "/demo/examples.html",
+			"text": "Examples"
+		}
+	],
+	"demolinks": [
+		{
+			"href": "demo/blank.html",
+			"text": "Blank"
+		},
+		{
+			"href": "demo/maintenance.html",
+			"text": "Maintenance"
+		},
+		{
+			"href": "demo/error/304.html",
+			"text": "304"
+		},
+		{
+			"href": "demo/error/404.html",
+			"text": "404"
+		},
+		{
+			"href": "demo/error/403.html",
+			"text": "403"
+		},
+		{
+			"href": "demo/error/400.html",
+			"text": "400"
+		},
+		{
+			"href": "demo/error/500.html",
+			"text": "500"
+		}
+	]
+}
diff --git a/source/templates/demo/macros/_nav.njk b/source/templates/hippie/macros/_nav.njk
similarity index 96%
rename from source/templates/demo/macros/_nav.njk
rename to source/templates/hippie/macros/_nav.njk
index cec0068..0178835 100644
--- a/source/templates/demo/macros/_nav.njk
+++ b/source/templates/hippie/macros/_nav.njk
@@ -1,10 +1,10 @@
-<!-- nav.main.macro -->
-{% macro main(data, active='') %}
-<nav>
-	<ul>
-		{% for link in data %}
-		<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
-		{% endfor %}
-	</ul>
-</nav>
-{% endmacro %}
+<!-- nav.main.macro -->
+{% macro main(data, active='') %}
+<nav>
+	<ul>
+		{% for link in data %}
+		<li{%if active == link.text %} class="active_txt"{% endif %}>{%if active == link.text %}{{ link.text }}{%else%}<a href="{{ link.href }}">{{ link.text }}</a>{% endif %}</li>
+		{% endfor %}
+	</ul>
+</nav>
+{% endmacro %}