diff --git a/source/code/app.js b/source/code/hippie/app.js
similarity index 52%
rename from source/code/app.js
rename to source/code/hippie/app.js
index f4d47bb..299dd72 100644
--- a/source/code/app.js
+++ b/source/code/hippie/app.js
@@ -1,3 +1,235 @@
+// TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
+// Bennung und Beschreibungen verbessern.
+
+// This is called everytime
+function setup() {
+	'use strict';
+
+	console.group('Document information');
+	console.info('\n', hippie.brand, '\n\n');
+	console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
+	console.groupEnd();
+	if (debugOn) {
+		console.group('Debug information');
+		console.dir(hippie);
+		console.groupEnd();
+	}
+}
+
+// MODULE Scroll navigation
+// Using constructor function
+function HippieScroll($tp, $dn) {
+	'use strict';
+
+	// this.$tp = $tp;
+	// Define initial situation
+	let initLeft = false;
+	const initY = hippie.screen.vh;
+
+	$tp.addClass('di_none');
+
+	// Check scroll position and toggle element
+	this.check = function () {
+		hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
+		if (hippie.screen.y > initY) {
+			if (!initLeft) {
+				$tp.removeClass('di_none');
+				console.info('Initial viewport left');
+			}
+			initLeft = true;
+		} else {
+			if (initLeft) {
+				$tp.addClass('di_none');
+				console.info('Initial viewport entered');
+			}
+			initLeft = false;
+		}
+	};
+
+	// Add events to navigation elements
+	$tp.click(function (event) {
+		event.preventDefault();
+		$('html, body').stop().animate({
+			scrollTop: 0
+		}, basicEase);
+		// console.log('Scrolled to top');
+	});
+	$dn.click(function (event) {
+		event.preventDefault();
+		var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
+		$('html').scrollTop(pos);
+		// document.documentElement.scrollTop = pos;
+		console.info('Scrolled down to', pos);
+	});
+}
+
+function HippieFade(toggleElement, initState) {
+	'use strict';
+
+	const fragment = document.createDocumentFragment();
+	const overlay = document.createElement('div');
+
+	overlay.id = 'mouse-overlay';
+
+	if (initState) {
+		overlay.classList.add('active');
+	}
+
+	toggleElement.addEventListener('click', function () {
+		overlay.classList.toggle('active');
+	});
+
+	fragment.appendChild(overlay);
+	document.body.style.position = 'relative';
+	document.body.prepend(fragment);
+}
+
+// MODULE Meta elements
+function HippieMeta($ma, $pp) {
+	'use strict';
+
+	let metaOn = false;
+
+	$ma.click(function () {
+		var $wrap, $pop;
+
+		// if (metaOn !== true) {
+		if (!metaOn) {
+			metaOn = true;
+
+			$pp.each(function () {
+				// if ($(this).css('position') === 'static') {
+				// 	$(this).addClass('js_changed_pos');
+				// 	$(this).css('position', 'relative');
+				// }
+				// $pop = $(this).next('.exp_pop').detach();
+				// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
+				// $wrap.after($pop);
+
+				$('<div></div>').addClass('exp_overlay').css({
+					position: 'absolute',
+					width: '100%',
+					height: '100%',
+					top: 0,
+					left: 0
+				}).appendTo($(this).addClass('exp_wrap'));
+
+				// Displays explanation popup following the mouse
+				$(this).on({
+					mouseenter: function () {
+						// if ($(this).attr('emmet')) {
+						//
+						// }
+						$(this).next('.exp_pop').show();
+					},
+					mouseleave: function () {
+						$(this).next('.exp_pop').hide();
+					},
+					mousemove: function (event) {
+						$(this).next('.exp_pop').css({
+							'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
+							'left': event.pageX + 8
+							// 'left': event.pageX - $(this).offset().left + 8
+						});
+					}
+				});
+			});
+
+		} else {
+			$pp.each(function () {
+				$(this).off('mouseenter mouseleave mousemove');
+
+				$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
+				// $wrap = $(this).parent('.exp_wrap');
+				// $pop = $wrap.next('.exp_pop').detach();
+				// $wrap.find('.exp_marker_pop').remove();
+				// $(this).unwrap('.exp_wrap');
+				// $(this).after($pop);
+				// if ($(this).hasClass('js_changed_pos')) {
+				// 	$(this).css('position', '');
+				// 	if ($(this).attr('style') === '') {
+				// 		$(this).removeAttr('style');
+				// 	}
+				// 	$(this).removeClass('js_changed_pos');
+				// }
+			});
+
+			metaOn = false;
+		}
+		console.log('Explanation mode', metaOn);
+	});
+}
+
+// Sets the href attribute to mailto: with given information
+function composeMail(tag, name, prov, suffix, text, topic) {
+	let trigger = tag.indexOf(".");
+	let mailString = name + '@' + prov + '.' + suffix;
+	let textString = mailString.replace(/@/g, "(at)");
+	let descString = "Nachricht an " + mailString;
+
+	if (!text) {
+		text = mailString;
+	} else if (text === "at") {
+		text = textString;
+	} else if (text === "to") {
+		text = descString;
+	}
+
+	if (topic) {
+		topic = "?subject=" + topic;
+	} else {
+		topic = "";
+	}
+
+	if (trigger === -1) {
+		const el = document.getElementById(tag);
+		const elContent = el.innerHTML;
+
+		el.innerHTML = elContent + text;
+		el.setAttribute("href", "mailto:" + mailString + topic);
+	} else {
+		const els = document.getElementsByClassName(tag.slice(1));
+
+		for (let el of els) {
+			const elContent = el.innerHTML;
+
+			el.innerHTML = elContent + text;
+			el.setAttribute("href", "mailto:" + mailString + topic);
+		};
+	}
+}
+
+// get document coordinates of the element
+// function getCoords (elem) {
+// 	let box = elem.getBoundingClientRect();
+//
+// 	return {
+// 		top: box.top + pageYOffset,
+// 		left: box.left + pageXOffset
+// 	};
+// }
+
+// https://stackoverflow.com/a/488073/1444149
+// function Utils () {}
+//
+// Utils.prototype = {
+// 	constructor: Utils,
+// 	isElementInView: function (element, fullyInView) {
+// 		var pageTop = $(window).scrollTop();
+// 		var pageBottom = pageTop + $(window).height();
+// 		var elementTop = $(element).offset().top;
+// 		var elementBottom = elementTop + $(element).height();
+//
+// 		if (fullyInView === true) {
+// 			return ((pageTop < elementTop) && (pageBottom > elementBottom));
+// 		} else {
+// 			return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
+// 		}
+// 	}
+// };
+//
+// var Utils = new Utils();
+
 // NEWER
 
 class TimeDisplay {
diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js
deleted file mode 100644
index ef2e3c7..0000000
--- a/source/code/hippie/functions.js
+++ /dev/null
@@ -1,228 +0,0 @@
-// This is called everytime
-function setup() {
-	'use strict';
-
-	console.group('Document information');
-	console.info('\n', hippie.brand, '\n\n');
-	console.info('HTML:', hippie.screen, '\nBODY:', hippie.body);
-	console.groupEnd();
-	if (debugOn) {
-		console.group('Debug information');
-		console.dir(hippie);
-		console.groupEnd();
-	}
-}
-
-// MODULE Scroll navigation
-// Using constructor function
-function HippieScroll($tp, $dn) {
-	'use strict';
-
-	// this.$tp = $tp;
-	// Define initial situation
-	let initLeft = false;
-	const initY = hippie.screen.vh;
-
-	$tp.addClass('di_none');
-
-	// Check scroll position and toggle element
-	this.check = function () {
-		hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
-		if (hippie.screen.y > initY) {
-			if (!initLeft) {
-				$tp.removeClass('di_none');
-				console.info('Initial viewport left');
-			}
-			initLeft = true;
-		} else {
-			if (initLeft) {
-				$tp.addClass('di_none');
-				console.info('Initial viewport entered');
-			}
-			initLeft = false;
-		}
-	};
-
-	// Add events to navigation elements
-	$tp.click(function (event) {
-		event.preventDefault();
-		$('html, body').stop().animate({
-			scrollTop: 0
-		}, basicEase);
-		// console.log('Scrolled to top');
-	});
-	$dn.click(function (event) {
-		event.preventDefault();
-		var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
-		$('html').scrollTop(pos);
-		// document.documentElement.scrollTop = pos;
-		console.info('Scrolled down to', pos);
-	});
-}
-
-function HippieFade(toggleElement, initState) {
-	'use strict';
-
-	const fragment = document.createDocumentFragment();
-	const overlay = document.createElement('div');
-
-	overlay.id = 'mouse-overlay';
-
-	if (initState) {
-		overlay.classList.add('active');
-	}
-
-	toggleElement.addEventListener('click', function () {
-		overlay.classList.toggle('active');
-	});
-
-	fragment.appendChild(overlay);
-	document.body.style.position = 'relative';
-	document.body.prepend(fragment);
-}
-
-// MODULE Meta elements
-function HippieMeta($ma, $pp) {
-	'use strict';
-
-	let metaOn = false;
-
-	$ma.click(function () {
-		var $wrap, $pop;
-
-		// if (metaOn !== true) {
-		if (!metaOn) {
-			metaOn = true;
-
-			$pp.each(function () {
-				// if ($(this).css('position') === 'static') {
-				// 	$(this).addClass('js_changed_pos');
-				// 	$(this).css('position', 'relative');
-				// }
-				// $pop = $(this).next('.exp_pop').detach();
-				// $wrap = $(this).wrap('<span class="exp_wrap"></span>').parent().prepend('<span class="exp_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
-				// $wrap.after($pop);
-
-				$('<div></div>').addClass('exp_overlay').css({
-					position: 'absolute',
-					width: '100%',
-					height: '100%',
-					top: 0,
-					left: 0
-				}).appendTo($(this).addClass('exp_wrap'));
-
-				// Displays explanation popup following the mouse
-				$(this).on({
-					mouseenter: function () {
-						// if ($(this).attr('emmet')) {
-						//
-						// }
-						$(this).next('.exp_pop').show();
-					},
-					mouseleave: function () {
-						$(this).next('.exp_pop').hide();
-					},
-					mousemove: function (event) {
-						$(this).next('.exp_pop').css({
-							'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
-							'left': event.pageX + 8
-							// 'left': event.pageX - $(this).offset().left + 8
-						});
-					}
-				});
-			});
-
-		} else {
-			$pp.each(function () {
-				$(this).off('mouseenter mouseleave mousemove');
-
-				$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
-				// $wrap = $(this).parent('.exp_wrap');
-				// $pop = $wrap.next('.exp_pop').detach();
-				// $wrap.find('.exp_marker_pop').remove();
-				// $(this).unwrap('.exp_wrap');
-				// $(this).after($pop);
-				// if ($(this).hasClass('js_changed_pos')) {
-				// 	$(this).css('position', '');
-				// 	if ($(this).attr('style') === '') {
-				// 		$(this).removeAttr('style');
-				// 	}
-				// 	$(this).removeClass('js_changed_pos');
-				// }
-			});
-
-			metaOn = false;
-		}
-		console.log('Explanation mode', metaOn);
-	});
-}
-
-// Sets the href attribute to mailto: with given information
-function composeMail(tag, name, prov, suffix, text, topic) {
-	let trigger = tag.indexOf(".");
-	let mailString = name + '@' + prov + '.' + suffix;
-	let textString = mailString.replace(/@/g, "(at)");
-	let descString = "Nachricht an " + mailString;
-
-	if (!text) {
-		text = mailString;
-	} else if (text === "at") {
-		text = textString;
-	} else if (text === "to") {
-		text = descString;
-	}
-
-	if (topic) {
-		topic = "?subject=" + topic;
-	} else {
-		topic = "";
-	}
-
-	if (trigger === -1) {
-		const el = document.getElementById(tag);
-		const elContent = el.innerHTML;
-
-		el.innerHTML = elContent + text;
-		el.setAttribute("href", "mailto:" + mailString + topic);
-	} else {
-		const els = document.getElementsByClassName(tag.slice(1));
-
-		for (let el of els) {
-			const elContent = el.innerHTML;
-
-			el.innerHTML = elContent + text;
-			el.setAttribute("href", "mailto:" + mailString + topic);
-		};
-	}
-}
-
-// get document coordinates of the element
-// function getCoords (elem) {
-// 	let box = elem.getBoundingClientRect();
-//
-// 	return {
-// 		top: box.top + pageYOffset,
-// 		left: box.left + pageXOffset
-// 	};
-// }
-
-// https://stackoverflow.com/a/488073/1444149
-// function Utils () {}
-//
-// Utils.prototype = {
-// 	constructor: Utils,
-// 	isElementInView: function (element, fullyInView) {
-// 		var pageTop = $(window).scrollTop();
-// 		var pageBottom = pageTop + $(window).height();
-// 		var elementTop = $(element).offset().top;
-// 		var elementBottom = elementTop + $(element).height();
-//
-// 		if (fullyInView === true) {
-// 			return ((pageTop < elementTop) && (pageBottom > elementBottom));
-// 		} else {
-// 			return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
-// 		}
-// 	}
-// };
-//
-// var Utils = new Utils();
diff --git a/source/code/hippie/global.js b/source/code/hippie/global.js
deleted file mode 100644
index 0b05906..0000000
--- a/source/code/hippie/global.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Setup
-// -----------------------------------------------------------------------------
-setup();
diff --git a/source/code/hippie/variables.js b/source/code/hippie/globals.js
similarity index 100%
rename from source/code/hippie/variables.js
rename to source/code/hippie/globals.js
diff --git a/source/templates/demo/_default.njk b/source/templates/demo/_default.njk
index c8aeed3..e9b46de 100644
--- a/source/templates/demo/_default.njk
+++ b/source/templates/demo/_default.njk
@@ -15,5 +15,5 @@
 
 {% block script %}
 	{{ super() }}
-	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+	<script src="/vendor/jquery.min.js"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/_app.njk b/source/templates/hippie/_app.njk
index 3dcc729..cf48706 100755
--- a/source/templates/hippie/_app.njk
+++ b/source/templates/hippie/_app.njk
@@ -22,8 +22,8 @@
 		{% block body %}{% endblock %}
 
 		{% block script %}
-			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-			<script src="{{ pageBase }}js/variables.js"></script>
+			<script src="/vendor/jquery.min.js"></script>
+			<script src="{{ pageBase }}js/globals.js"></script>
 			<script src="{{ pageBase }}js/app.js"></script>
 
 			<script>
diff --git a/source/templates/hippie/_main.njk b/source/templates/hippie/_main.njk
index ede46e3..7574dc9 100644
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@@ -42,14 +42,14 @@
 		{% block script %}
 			{{ log.log('BODY        :: Loading script assets...') }}
 			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-			<!-- build:js js/main.concat.min.js -->
-			{# // TODO: Remove dependecy to jQuery; at least maek it optional #}
-			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-			<script src="{{ pageBase }}js/variables.js"></script>
-			<script src="{{ pageBase }}js/functions.js"></script>
-			<script src="{{ pageBase }}js/global.js"></script>
+			<script src="/vendor/jquery.min.js"></script>
+			<script src="{{ pageBase }}js/globals.js"></script>
+			<script src="{{ pageBase }}js/app.js"></script>
 			<script>
-				// Create instances of objects made by contructor functions
+				// Setup global things for all screens
+				setup();
+
+				// Create instances of objects made by constructor functions
 				let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
 				let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
 
diff --git a/source/templates/hippie/app.liquid b/source/templates/hippie/app.liquid
index 2456f20..6d9c54a 100644
--- a/source/templates/hippie/app.liquid
+++ b/source/templates/hippie/app.liquid
@@ -14,7 +14,7 @@
 {% block script %}
 {{ block.super -}}
 <script src="/vendor/jquery.min.js"></script>
-<script src="{{ pageBase }}js/variables.js"></script>
+<script src="{{ pageBase }}js/globals.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 
 <script>