diff --git a/source/code/app.js b/source/code/app.js
index 8632638..8a21b5f 100644
--- a/source/code/app.js
+++ b/source/code/app.js
@@ -1,25 +1,33 @@
 //NEW
 
 function Clock(id) {
-	this.id = id;
+	'use strict';
 
-	var that = this;
-	setInterval(function () { that.updateClock(); }, 1000);
+	this.id = id;
+	const that = this;
+
+	setInterval(function () {
+		that.updateClock();
+	}, 1000);
 	this.updateClock();
 }
 
 Clock.prototype.updateClock = function () {
-	var date = new Date();
-	var clock = document.getElementById(this.id);
+	'use strict';
+
+	const date = new Date();
+	const clock = document.getElementById(this.id);
 	//console.log(this);
-	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
+	clock.innerHTML = this.formatDigits(date.getHours()) + ':' + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
 };
 
 Clock.prototype.formatDigits = function (val) {
-	if (val < 10) val = "0" + val;
+	'use strict';
+
+	if (val < 10) val = '0' + val;
 
 	return val;
-}
+};
 
 //OLD
 
@@ -121,6 +129,7 @@ function barwidth(size, G, W) {
 
 	return newW;
 }
+
 //String Element erweitern
 String.prototype.transform = function () {
 	return parseFloat(this.replace(',', '.'));
@@ -129,6 +138,7 @@ String.prototype.transform = function () {
 Array.prototype.arrayAdd = function () {
 	return eval(this.join("+"));
 }
+
 //Speicherplatz in Prozent berechnen
 function percentage(total, gigs, round) {
 	var totalSpace = total;
@@ -138,6 +148,7 @@ function percentage(total, gigs, round) {
 
 	return p;
 }
+
 //Speicherplatz in GB berechnen
 function gigabytes(percent, total, round) {
 	var occupiedPercent = percent;
diff --git a/source/data/new.json b/source/data/start.json
similarity index 56%
rename from source/data/new.json
rename to source/data/start.json
index 9d4a0a8..cc0da22 100644
--- a/source/data/new.json
+++ b/source/data/start.json
@@ -5,10 +5,10 @@
 	},
 	{
 		"text": "Basics",
-		"href": "./demo/basics.html"
+		"href": "/demo/basics.html"
 	},
 	{
 		"text": "Drag",
-		"href": "./demo/examples/ui/drag.html"
+		"href": "/demo/examples/ui/drag.html"
 	}
 ]
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
deleted file mode 100755
index df1f62a..0000000
--- a/source/screens/demo/examples/ui/new.njk
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: New
-tags:
-  - ui
----
-{% set pageId = page.fileSlug %}
-{% set bodyClass = "body_new" %}
-
-{% extends "hippie/_app_frame.njk" %}
-{% import "hippie/macros/_header.njk" as header %}
-
-{% block body %}
-  {{ header.status(hippie, new) }}
-  <header class="area menu io">
-    <nav>
-      <ul>
-        <li>
-          <a href="" class="a_button">Func 1</a>
-        </li>
-        <li>
-          <a href="" class="a_button">Func 2</a>
-        </li>
-      </ul>
-    </nav>
-  </header>
-  <div class="area grid">
-    <div class="item">1</div>
-    <div class="item">2</div>
-    <div class="item">3</div>
-    <div class="item">4</div>
-  </div>
-{% endblock %}
-
-{%- block script %}
-  {{ super() }}
-  <script>
-    let clock = new Clock('time');
-
-    document.addEventListener('mousemove', (event) => {
-      document
-        .getElementById('log')
-        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-    });
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/start.liquid b/source/screens/demo/examples/ui/start.liquid
new file mode 100644
index 0000000..8e13c85
--- /dev/null
+++ b/source/screens/demo/examples/ui/start.liquid
@@ -0,0 +1,44 @@
+---
+title: Start
+tags:
+- ui
+---
+{% assign bodyClass = "body_new" -%}
+{% layout "hippie/app.liquid" %}
+
+{% block body %}
+{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
+<header class="area menu io">
+	<nav>
+		<ul>
+			<li>
+				<a href="" class="a_button">Func 1</a>
+			</li>
+			<li>
+				<a href="" class="a_button">Func 2</a>
+			</li>
+		</ul>
+	</nav>
+</header>
+<div class="area grid">
+	<div class="item">1</div>
+	<div class="item">2</div>
+	<div class="item">3</div>
+	<div class="item">4</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+{{ block.super -}}
+<script>
+	let clock = new Clock('time');
+
+	ongoing();
+
+	document.addEventListener('mousemove', (event) => {
+		document
+			.getElementById('log')
+			.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+	});
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/partials/header-status.liquid b/source/templates/hippie/partials/header-status.liquid
new file mode 100644
index 0000000..725e305
--- /dev/null
+++ b/source/templates/hippie/partials/header-status.liquid
@@ -0,0 +1,21 @@
+<div id="top">
+	<h1 class="brand">
+		<a href="#">{{ hippie.brand | upcase }}</a>
+	</h1>
+	<nav>
+		<ul>
+			{% for link in links %}
+				<li>
+					<a href="{{ link.href }}">{{ link.text }}</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</nav>
+	<div class="state">
+		<p>{% render 'hippie/partials/status-coord', id: "log" %}
+			/
+			{% render 'hippie/partials/status-date', id: "date" %}
+			/
+			{% render 'hippie/partials/status-time', id: "time" %}</p>
+	</div>
+</div>
diff --git a/source/templates/hippie/partials/status-coord.liquid b/source/templates/hippie/partials/status-coord.liquid
new file mode 100644
index 0000000..29e592f
--- /dev/null
+++ b/source/templates/hippie/partials/status-coord.liquid
@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: 'X: #, Y: ##' }}</span>
diff --git a/source/templates/hippie/partials/status-date.liquid b/source/templates/hippie/partials/status-date.liquid
new file mode 100644
index 0000000..296a866
--- /dev/null
+++ b/source/templates/hippie/partials/status-date.liquid
@@ -0,0 +1,6 @@
+<span id="{{ id }}">
+	<span id="day">Wochentag</span>,
+	<span id="dayNumb">##</span>.
+	<span id="month">Monat</span>
+	<span id="year">####</span>
+</span>
diff --git a/source/templates/hippie/partials/status-time.liquid b/source/templates/hippie/partials/status-time.liquid
new file mode 100644
index 0000000..f981e80
--- /dev/null
+++ b/source/templates/hippie/partials/status-time.liquid
@@ -0,0 +1 @@
+<span id="{{ id }}">{{ text | default: '00:00:00' }}</span><span>{{ postfix | default: ' Uhr' }}</span>