diff --git a/.eleventy.js b/.eleventy.js
index ccca65a..5218bd8 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,4 +1,6 @@
 module.exports = function (eleventyConfig) {
+	// eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+
 	eleventyConfig.setNunjucksEnvironmentOptions({
 		// throwOnUndefined: true,
 		trimBlocks: true
@@ -8,8 +10,11 @@ module.exports = function (eleventyConfig) {
 		return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
 	});
 
+	let demoMode = false;
+	let pageBase = demoMode ? './demo/' : './';
+
 	eleventyConfig.addGlobalData("hippie", {
-		pageBase: './',
+		pageBase: pageBase,
 		brand: 'hippie',
 		titlePrefix: '',
 		titlePostfix: ' - HIPPIE',
@@ -37,6 +42,7 @@ module.exports = function (eleventyConfig) {
 		},
 		markdownTemplateEngine: "njk",
 		htmlTemplateEngine: "njk",
-		templateFormats: ["html", "njk", "md"]
+		templateFormats: ["html", "njk", "md"],
+		// pathPrefix: './demo/'
 	}
 };
diff --git a/source/screens/basics.njk b/source/screens/demo/basics.njk
similarity index 99%
rename from source/screens/basics.njk
rename to source/screens/demo/basics.njk
index f31fedb..252baf3 100644
--- a/source/screens/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "basics" %}
 
-{% extends "demo/_docs.njk" %}
+{% extends "demo/_main.njk" %}
 
 {% block title %}Grundlagen{% endblock %}
 {% block head %}
diff --git a/source/screens/components.njk b/source/screens/demo/components.njk
similarity index 98%
rename from source/screens/components.njk
rename to source/screens/demo/components.njk
index 7b00a16..6a62414 100644
--- a/source/screens/components.njk
+++ b/source/screens/demo/components.njk
@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "components" %}
 
-{% extends "demo/_docs.njk" %}
+{% extends "demo/_main.njk" %}
 
 {% block title %}Komponenten{% endblock %}
 {% block head %}
diff --git a/source/screens/demo/card.njk b/source/screens/demo/examples/card.njk
similarity index 98%
rename from source/screens/demo/card.njk
rename to source/screens/demo/examples/card.njk
index 3a76b3f..4a38369 100644
--- a/source/screens/demo/card.njk
+++ b/source/screens/demo/examples/card.njk
@@ -3,7 +3,7 @@
 {% set pageId = "card" %}
 {% set pageClass = "html_card" %}
 
-{% extends "demo/_demo.njk" %}
+{% extends "demo/_default.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}Karte{% endblock %}
diff --git a/source/screens/demo/portal.njk b/source/screens/demo/examples/portal.njk
similarity index 93%
rename from source/screens/demo/portal.njk
rename to source/screens/demo/examples/portal.njk
index b301203..c6e7b45 100644
--- a/source/screens/demo/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@@ -3,7 +3,7 @@
 {% set pageId = "index" %}
 {% set bodyClass = "body_portal" %}
 
-{% extends "demo/_demo.njk" %}
+{% extends "demo/_default.njk" %}
 
 {% import "demo/macros/_gates.njk" as gate %}
 
diff --git a/source/screens/index.json b/source/screens/demo/index.json
similarity index 90%
rename from source/screens/index.json
rename to source/screens/demo/index.json
index 958c539..9469dfc 100644
--- a/source/screens/index.json
+++ b/source/screens/demo/index.json
@@ -61,15 +61,15 @@
   ],
   "demo": [
     {
-      "href": "demo/card.html",
+      "href": "examples/card.html",
       "text": "Card"
     },
     {
-      "href": "demo/portal.html",
+      "href": "examples/portal.html",
       "text": "Portal"
     },
     {
-      "href": "demo/songbook.html",
+      "href": "examples/songbook.html",
       "text": "Songbook"
     }
   ]
diff --git a/source/screens/index.njk b/source/screens/demo/index.njk
similarity index 90%
rename from source/screens/index.njk
rename to source/screens/demo/index.njk
index 1724c5c..8468e88 100644
--- a/source/screens/index.njk
+++ b/source/screens/demo/index.njk
@@ -1,9 +1,12 @@
+---
+permalink: "/"
+---
 <!-- index.screen -->
 {% set pageBase = hippie.pageBase %}
 {% set pageId = "index" %}
 {% set pageClass = "h_full_view" %}
 
-{% extends "demo/_demo.njk" %}
+{% extends "demo/_default.njk" %}
 
 {% block title %}Index{% endblock %}
 {% block head %}
@@ -39,7 +42,7 @@
         <ul class="list_link">
           {% for link in index %}
             <li>
-              <a href="{{ link.href }}">{{ link.text }}</a>
+              <a href="demo/{{ link.href }}">{{ link.text }}</a>
             </li>
           {% endfor %}
         </ul>
@@ -48,7 +51,7 @@
       <ul class="list_link">
         {% for link in pages %}
           <li>
-            <a href="{{ link.href }}">{{ link.text }}</a>
+            <a href="demo/{{ link.href }}">{{ link.text }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -56,7 +59,7 @@
       <ul class="list_link">
         {% for link in demo %}
           <li>
-            <a href="{{ link.href }}">{{ link.text }}</a>
+            <a href="demo/{{ link.href }}">{{ link.text }}</a>
           </li>
         {% endfor %}
       </ul>
diff --git a/source/screens/introduction.njk b/source/screens/demo/introduction.njk
similarity index 97%
rename from source/screens/introduction.njk
rename to source/screens/demo/introduction.njk
index aeea393..a4580ca 100644
--- a/source/screens/introduction.njk
+++ b/source/screens/demo/introduction.njk
@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "intro" %}
 
-{% extends "demo/_docs.njk" %}
+{% extends "demo/_main.njk" %}
 
 {% block title %}Einführung{% endblock %}
 {% block head %}
diff --git a/source/screens/layouts.njk b/source/screens/demo/layouts.njk
similarity index 99%
rename from source/screens/layouts.njk
rename to source/screens/demo/layouts.njk
index 4bd7966..dce2d98 100644
--- a/source/screens/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -2,7 +2,7 @@
 {% set pageBase = "../" %}
 {% set pageId = "layouts" %}
 
-{% extends "demo/_docs.njk" %}
+{% extends "demo/_main.njk" %}
 
 {% block title %}Gestaltungen{% endblock %}
 {% block head %}
diff --git a/source/screens/pages/blank.njk b/source/screens/demo/pages/blank.njk
similarity index 83%
rename from source/screens/pages/blank.njk
rename to source/screens/demo/pages/blank.njk
index 1d23c3f..de1faef 100644
--- a/source/screens/pages/blank.njk
+++ b/source/screens/demo/pages/blank.njk
@@ -3,7 +3,7 @@
 {% set pageId = "blank" %}
 {% set pageClass = "h_full_view" %}
 
-{% extends "hippie/_default.njk" %}
+{% extends "demo/_default.njk" %}
 
 {% block title %}Blank{% endblock %}
 
diff --git a/source/screens/pages/error/304.njk b/source/screens/demo/pages/error/304.njk
similarity index 94%
rename from source/screens/pages/error/304.njk
rename to source/screens/demo/pages/error/304.njk
index f452801..20db3e7 100644
--- a/source/screens/pages/error/304.njk
+++ b/source/screens/demo/pages/error/304.njk
@@ -3,14 +3,14 @@
 {% set pageId = "304" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Umleitung</h3>
diff --git a/source/screens/pages/error/400.njk b/source/screens/demo/pages/error/400.njk
similarity index 92%
rename from source/screens/pages/error/400.njk
rename to source/screens/demo/pages/error/400.njk
index aa13f9f..1122396 100644
--- a/source/screens/pages/error/400.njk
+++ b/source/screens/demo/pages/error/400.njk
@@ -3,14 +3,14 @@
 {% set pageId = "400" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Client-Fehler</h3>
diff --git a/source/screens/pages/error/401.njk b/source/screens/demo/pages/error/401.njk
similarity index 93%
rename from source/screens/pages/error/401.njk
rename to source/screens/demo/pages/error/401.njk
index 7eb424e..7e7108c 100644
--- a/source/screens/pages/error/401.njk
+++ b/source/screens/demo/pages/error/401.njk
@@ -3,14 +3,14 @@
 {% set pageId = "401" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Client-Fehler</h3>
diff --git a/source/screens/pages/error/403.njk b/source/screens/demo/pages/error/403.njk
similarity index 93%
rename from source/screens/pages/error/403.njk
rename to source/screens/demo/pages/error/403.njk
index 5223278..3fc9b1d 100644
--- a/source/screens/pages/error/403.njk
+++ b/source/screens/demo/pages/error/403.njk
@@ -3,14 +3,14 @@
 {% set pageId = "403" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Client-Fehler</h3>
diff --git a/source/screens/pages/error/404.njk b/source/screens/demo/pages/error/404.njk
similarity index 93%
rename from source/screens/pages/error/404.njk
rename to source/screens/demo/pages/error/404.njk
index ff03c43..ba9e0cd 100644
--- a/source/screens/pages/error/404.njk
+++ b/source/screens/demo/pages/error/404.njk
@@ -3,14 +3,14 @@
 {% set pageId = "404" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Client-Fehler</h3>
diff --git a/source/screens/pages/error/408.njk b/source/screens/demo/pages/error/408.njk
similarity index 92%
rename from source/screens/pages/error/408.njk
rename to source/screens/demo/pages/error/408.njk
index 5845223..6c679ab 100644
--- a/source/screens/pages/error/408.njk
+++ b/source/screens/demo/pages/error/408.njk
@@ -3,14 +3,14 @@
 {% set pageId = "408" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Client-Fehler</h3>
diff --git a/source/screens/pages/error/500.njk b/source/screens/demo/pages/error/500.njk
similarity index 92%
rename from source/screens/pages/error/500.njk
rename to source/screens/demo/pages/error/500.njk
index 9ea0863..001c27a 100644
--- a/source/screens/pages/error/500.njk
+++ b/source/screens/demo/pages/error/500.njk
@@ -3,14 +3,14 @@
 {% set pageId = "500" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Server-Fehler</h3>
diff --git a/source/screens/pages/error/503.njk b/source/screens/demo/pages/error/503.njk
similarity index 94%
rename from source/screens/pages/error/503.njk
rename to source/screens/demo/pages/error/503.njk
index a4c021f..4ca521d 100644
--- a/source/screens/pages/error/503.njk
+++ b/source/screens/demo/pages/error/503.njk
@@ -3,14 +3,14 @@
 {% set pageId = "503" %}
 {% set bodyClass = "body_status" %}
 
-{% extends "hippie/_maintenance.njk" %}
+{% extends "demo/_maintenance.njk" %}
 
 {% block title %}{{ pageId }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
-{% block main %}
+{% block body %}
 <main class="main_site">
   <h1>{{ pageId }}</h1>
   <h3>Server-Fehler</h3>
diff --git a/source/screens/pages/maintenance.njk b/source/screens/demo/pages/maintenance.njk
similarity index 81%
rename from source/screens/pages/maintenance.njk
rename to source/screens/demo/pages/maintenance.njk
index 5bdae82..03faa16 100644
--- a/source/screens/pages/maintenance.njk
+++ b/source/screens/demo/pages/maintenance.njk
@@ -1,18 +1,18 @@
-<!-- maintenance.page -->
-{% set pageBase = "../" %}
-{% set pageId = "blank" %}
-{% set pageClass = "h_full_view" %}
-
-{% extends "hippie/_maintenance.njk" %}
-
-{% block title %}Maintenance{% endblock %}
-
-{% block head %}
-{{ super() }}
-{% endblock %}
-
-{% block main %}
-<div id="root" class="overflow">
-  <h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
-</div>
-{% endblock %}
+<!-- maintenance.page -->
+{% set pageBase = "../" %}
+{% set pageId = "blank" %}
+{% set pageClass = "h_full_view" %}
+
+{% extends "demo/_maintenance.njk" %}
+
+{% block title %}Maintenance{% endblock %}
+
+{% block head %}
+{{ super() }}
+{% endblock %}
+
+{% block body %}
+<div id="root" class="overflow">
+  <h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
+</div>
+{% endblock %}
diff --git a/source/templates/demo/_demo.njk b/source/templates/demo/_default.njk
similarity index 89%
rename from source/templates/demo/_demo.njk
rename to source/templates/demo/_default.njk
index afc2aae..19f5c0b 100644
--- a/source/templates/demo/_demo.njk
+++ b/source/templates/demo/_default.njk
@@ -1,9 +1,9 @@
-<!-- demo.template -->
+<!-- demo.default.template -->
 {% extends "hippie/_default.njk" %}
 
 {% block meta %}
   {% include "demo/partials/_meta.njk" %}
-  {# <base href="/"> #}
+  <base href="/">
 {% endblock %}
 
 {% block links %}
diff --git a/source/templates/demo/_docs.njk b/source/templates/demo/_main.njk
similarity index 95%
rename from source/templates/demo/_docs.njk
rename to source/templates/demo/_main.njk
index 97f765d..c80afc1 100644
--- a/source/templates/demo/_docs.njk
+++ b/source/templates/demo/_main.njk
@@ -1,9 +1,9 @@
-<!-- docs.template -->
+<!-- demo.main.template -->
 {% extends "hippie/_main.njk" %}
 
 {% block meta %}
   {% include "demo/partials/_meta.njk" %}
-  {# <base href="/"> #}
+  <base href="/">
 {% endblock %}
 
 {% block links %}
diff --git a/source/templates/demo/_maintenance.njk b/source/templates/demo/_maintenance.njk
new file mode 100644
index 0000000..0fe1365
--- /dev/null
+++ b/source/templates/demo/_maintenance.njk
@@ -0,0 +1,13 @@
+<!-- demo.maintenance.template -->
+{% extends "hippie/_maintenance.njk" %}
+
+{% block meta %}
+  {% include "demo/partials/_meta.njk" %}
+  <base href="/">
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  {# <link rel="stylesheet" type="text/css" media="all" href="css/demo.css"/> #}
+  {# <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase | subdir(2) }}css/demo.css"/> #}
+{% endblock %}
diff --git a/source/templates/hippie/_maintenance.njk b/source/templates/hippie/_maintenance.njk
index 0635f17..540b310 100644
--- a/source/templates/hippie/_maintenance.njk
+++ b/source/templates/hippie/_maintenance.njk
@@ -1,4 +1,5 @@
 <!-- maintenance.template -->
+{% import "hippie/macros/footer-status.njk" as status %}
 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
   <head>
@@ -6,23 +7,22 @@
 
     {% block head %}
       <title>
+        {{ hippie.titlePrefix }}
         {% block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
 
-      {% include "hippie/partials/_head_meta.njk" %}
-      {% block meta %}{% endblock %}
+      {% block meta %}
+        {% include "hippie/partials/_head_meta.njk" %}
+      {% endblock %}
 
       {% block links %}
         <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAH7SURBVDiNldM/aJNBGMfx71viH7TqIoLiIOoiSJRu0qE4uIiDm5OI4ODk4uYioqBuUkR0kKJNFC1mqUltlbZSqE3RYt+2SUyTppCmeU2bkiZ907z3vnfnUEU0NrXPeMd97p6H+xlaa02D0oDRYL+p4WEN9yZm8dT6dzQEQtkCuiIJxHKbBxZrLiNWmc8vRxn7lMGRanPAw0QW49Uwp8ODJEZmCCSt/wcGrCWavte44LRz7FyYnd+yxMZz2J7cGKh6kvczRUp3X9BnmFyLzHNVRpkeShNM1b+iDngUn2Oue4qLLV3cf+YST2tiLf3sj04wmypSEt76wFixwoJpcbKnh/ZMmuXK2vqdYJXLxyPMDiTpTOX/DbhK88bMMh4Y5sSZt3R2/+53aRkCzgT+oX4Kls2i49YDT+M5JkMmV+aj3BrII/+a15MuSevZEPl3UzxP5/8EMiurfO1L0hyNU27tZehL/c/zJNzsLXB+uoNySZBfFQD4tIbHHxJMfoxxu2pi7rK5fsm3FgL5MwXKQAPaMzh8JMbg61E6mn3c8B/CF5yx2L1tC/5TR4nsAS/RhlNzcR0P6TggFVoDGrYqyYMkLOybZ4fQZFZqGOHsgi4KF1tIakrhKIXj/WrBQAuJV3EQtsBbEQjbQVQEB/0HUHu3Y2wU5/XKVRqhFD8AgpYX2M9TNGcAAAAASUVORK5CYII=">
-
         <link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo_basic.css"/>
       {% endblock %}
     {% endblock %}
   </head>
 
   <body class="{{ bodyClass }}">
-    {% block main %}
-
-      {% import "hippie/macros/footer-status.njk" as status %}
+    {% block body %}
       {{ status.footer() }}
     {% endblock %}
   </body>