diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index 252baf3..80c456f 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -1,6 +1,10 @@
-<!-- basics.page -->
+---
+title: Basics
+tags:
+  - index
+---
 {% set pageBase = "../" %}
-{% set pageId = "basics" %}
+{% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
 
@@ -10,6 +14,7 @@
 {% endblock %}
 
 {% block main %}
+<!-- {{ page.fileSlug }}.page -->
   {% include "hippie/partials/_body_nav.njk" %}
 
   <div id="begin" class="demo__intro">
diff --git a/source/screens/demo/components.njk b/source/screens/demo/components.njk
index 6a62414..eb07822 100644
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@@ -1,6 +1,10 @@
-<!-- components.page -->
+---
+title: Components
+tags:
+  - index
+---
 {% set pageBase = "../" %}
-{% set pageId = "components" %}
+{% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
 
@@ -10,6 +14,7 @@
 {% endblock %}
 
 {% block main %}
+<!-- {{ page.fileSlug }}.page -->
   <div class="temp_layer">
     <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
     {% include "hippie/partials/_body_nav.njk" %}
diff --git a/source/screens/demo/examples/card.njk b/source/screens/demo/examples/card.njk
index 4a38369..e917881 100644
--- a/source/screens/demo/examples/card.njk
+++ b/source/screens/demo/examples/card.njk
@@ -1,6 +1,10 @@
-<!-- card.page -->
+---
+title: Card
+tags:
+  - example
+---
 {% set pageBase = "../" %}
-{% set pageId = "card" %}
+{% set pageId = page.fileSlug %}
 {% set pageClass = "html_card" %}
 
 {% extends "demo/_default.njk" %}
@@ -13,6 +17,7 @@
 {% endblock %}
 
 {% block body %}
+<!-- {{ page.fileSlug }}.page -->
   <div class="card_bkg">
     <div id="dither"></div>
     <svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
diff --git a/source/screens/demo/examples/portal.njk b/source/screens/demo/examples/portal.njk
index c6e7b45..981602a 100644
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@@ -1,6 +1,10 @@
-<!-- portal.page -->
+---
+title: Portal
+tags:
+  - example
+---
 {% set pageBase = "../" %}
-{% set pageId = "index" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_portal" %}
 
 {% extends "demo/_default.njk" %}
@@ -14,6 +18,7 @@
 {% endblock %}
 
 {% block body %}
+<!-- {{ page.fileSlug }}.page -->
   <div class="portal">
     {{ gate.list(
     'Tor mit Symbol und Liste',
diff --git a/source/screens/demo/index.json b/source/screens/demo/index.json
deleted file mode 100644
index 9469dfc..0000000
--- a/source/screens/demo/index.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
-  "index": [
-    {
-      "href": "index.html",
-      "text": "Index"
-    },
-    {
-      "href": "introduction.html",
-      "text": "Introduction"
-    },
-    {
-      "href": "basics.html",
-      "text": "Basics"
-    },
-    {
-      "href": "components.html",
-      "text": "Components"
-    },
-    {
-      "href": "layouts.html",
-      "text": "Layouts"
-    }
-  ],
-  "pages": [
-    {
-      "href": "pages/blank.html",
-      "text": "Blank"
-    },
-    {
-      "href": "pages/maintenance.html",
-      "text": "Maintenance"
-    },
-    {
-      "href": "pages/error/304.html",
-      "text": "304"
-    },
-    {
-      "href": "pages/error/400.html",
-      "text": "400"
-    },
-    {
-      "href": "pages/error/401.html",
-      "text": "401"
-    },
-    {
-      "href": "pages/error/403.html",
-      "text": "403"
-    },
-    {
-      "href": "pages/error/404.html",
-      "text": "404"
-    },
-    {
-      "href": "pages/error/408.html",
-      "text": "408"
-    },
-    {
-      "href": "pages/error/500.html",
-      "text": "500"
-    }
-  ],
-  "demo": [
-    {
-      "href": "examples/card.html",
-      "text": "Card"
-    },
-    {
-      "href": "examples/portal.html",
-      "text": "Portal"
-    },
-    {
-      "href": "examples/songbook.html",
-      "text": "Songbook"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/source/screens/demo/index.njk b/source/screens/demo/index.njk
index 8468e88..47f1c1e 100644
--- a/source/screens/demo/index.njk
+++ b/source/screens/demo/index.njk
@@ -1,9 +1,11 @@
 ---
 permalink: "/"
+title: Index
+tags:
+  - index
 ---
-<!-- index.screen -->
 {% set pageBase = hippie.pageBase %}
-{% set pageId = "index" %}
+{% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
@@ -14,6 +16,7 @@ permalink: "/"
 {% endblock %}
 
 {% block body %}
+<!-- {{ page.fileSlug }}.page -->
   <div class="wrap">
     <div class="hello">
       <h2>This is
@@ -40,26 +43,26 @@ permalink: "/"
       </div>
       <nav>
         <ul class="list_link">
-          {% for link in index %}
+          {% for link in collections.index %}
             <li>
-              <a href="demo/{{ link.href }}">{{ link.text }}</a>
+              <a href="{{ link.page.url }}">{{ link.data.title }}</a>
             </li>
           {% endfor %}
         </ul>
       </nav>
-      <h3>Pages</h3>
+      <h3>Page</h3>
       <ul class="list_link">
-        {% for link in pages %}
+        {% for link in collections.page | sort(false, false, 'data.title') %}
           <li>
-            <a href="demo/{{ link.href }}">{{ link.text }}</a>
+            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
           </li>
         {% endfor %}
       </ul>
-      <h3>Demo</h3>
+      <h3>Example</h3>
       <ul class="list_link">
-        {% for link in demo %}
+        {% for link in collections.example %}
           <li>
-            <a href="demo/{{ link.href }}">{{ link.text }}</a>
+            <a href="{{ link.page.url }}">{{ link.data.title }}</a>
           </li>
         {% endfor %}
       </ul>
diff --git a/source/screens/demo/introduction.njk b/source/screens/demo/introduction.njk
index a4580ca..d25b1ad 100644
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@@ -1,4 +1,8 @@
-<!-- introduction.page -->
+---
+title: Introduction
+tags:
+  - index
+---
 {% set pageBase = "../" %}
 {% set pageId = "intro" %}
 
@@ -10,6 +14,7 @@
 {% endblock %}
 
 {% block main %}
+<!-- {{ page.fileSlug }}.page -->
   {% include "hippie/partials/_body_nav.njk" %}
 
   <section class="sec_main_center">
diff --git a/source/screens/demo/layouts.njk b/source/screens/demo/layouts.njk
index dce2d98..e06b384 100644
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@@ -1,6 +1,10 @@
-<!-- layouts.page -->
+---
+title: Layouts
+tags:
+  - index
+---
 {% set pageBase = "../" %}
-{% set pageId = "layouts" %}
+{% set pageId = page.fileSlug %}
 
 {% extends "demo/_main.njk" %}
 
@@ -10,6 +14,7 @@
 {% endblock %}
 
 {% block main %}
+<!-- {{ page.fileSlug }}.page -->
   <div class="temp_layer">
     <!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
     {% include "hippie/partials/_body_nav.njk" %}
diff --git a/source/screens/demo/pages/blank.njk b/source/screens/demo/pages/blank.njk
index de1faef..3ff646f 100644
--- a/source/screens/demo/pages/blank.njk
+++ b/source/screens/demo/pages/blank.njk
@@ -1,18 +1,20 @@
-<!-- blank.page -->
+---
+title: Blank
+---
 {% set pageBase = "../" %}
-{% set pageId = "blank" %}
+{% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
 
 {% extends "demo/_default.njk" %}
 
-{% block title %}Blank{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
-
+<!-- {{ page.fileSlug }}.page -->
 {% endblock %}
 
 {% block script %}
diff --git a/source/screens/demo/pages/error/304.njk b/source/screens/demo/pages/error/304.njk
index 20db3e7..1d47451 100644
--- a/source/screens/demo/pages/error/304.njk
+++ b/source/screens/demo/pages/error/304.njk
@@ -1,18 +1,20 @@
-<!-- error-404.page -->
+---
+title: 304
+---
 {% set pageBase = "../../" %}
-{% set pageId = "304" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Umleitung</h3>
   <p>Unverändert <dfn>Not Modified</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#3xx_%E2%80%93_Umleitung">
diff --git a/source/screens/demo/pages/error/400.njk b/source/screens/demo/pages/error/400.njk
index 1122396..087b9a8 100644
--- a/source/screens/demo/pages/error/400.njk
+++ b/source/screens/demo/pages/error/400.njk
@@ -1,18 +1,20 @@
-<!-- error-404.page -->
+---
+title: 400
+---
 {% set pageBase = "../../" %}
-{% set pageId = "400" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Client-Fehler</h3>
   <p>Fehlerhafte Anfrage! <dfn>Bad Request</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
diff --git a/source/screens/demo/pages/error/401.njk b/source/screens/demo/pages/error/401.njk
index 7e7108c..f38c3f9 100644
--- a/source/screens/demo/pages/error/401.njk
+++ b/source/screens/demo/pages/error/401.njk
@@ -1,18 +1,20 @@
-<!-- error-404.page -->
+---
+title: 401
+---
 {% set pageBase = "../../" %}
-{% set pageId = "401" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Client-Fehler</h3>
   <p>Nicht autorisiert! <dfn>Unauthorized</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
diff --git a/source/screens/demo/pages/error/403.njk b/source/screens/demo/pages/error/403.njk
index 3fc9b1d..03904e4 100644
--- a/source/screens/demo/pages/error/403.njk
+++ b/source/screens/demo/pages/error/403.njk
@@ -1,18 +1,20 @@
-<!-- error-404.page -->
+---
+title: 403
+---
 {% set pageBase = "../../" %}
-{% set pageId = "403" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Client-Fehler</h3>
   <p>Nicht erlaubt! <dfn>Forbidden</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
diff --git a/source/screens/demo/pages/error/404.njk b/source/screens/demo/pages/error/404.njk
index ba9e0cd..bebd4f5 100644
--- a/source/screens/demo/pages/error/404.njk
+++ b/source/screens/demo/pages/error/404.njk
@@ -1,18 +1,20 @@
-<!-- error-404.page -->
+---
+title: 404
+---
 {% set pageBase = "../../" %}
-{% set pageId = "404" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Client-Fehler</h3>
   <p>Hier ist nichts. <dfn>Not Found</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
diff --git a/source/screens/demo/pages/error/408.njk b/source/screens/demo/pages/error/408.njk
index 6c679ab..c5e10e0 100644
--- a/source/screens/demo/pages/error/408.njk
+++ b/source/screens/demo/pages/error/408.njk
@@ -1,18 +1,20 @@
-<!-- error-404.page -->
+---
+title: 408
+---
 {% set pageBase = "../../" %}
-{% set pageId = "408" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Client-Fehler</h3>
   <p>Zeitüberschreitung der Anforderung. <dfn>Request Timeout</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#4xx_.E2.80.93_Client-Fehler">
diff --git a/source/screens/demo/pages/error/500.njk b/source/screens/demo/pages/error/500.njk
index 001c27a..d04c5c8 100644
--- a/source/screens/demo/pages/error/500.njk
+++ b/source/screens/demo/pages/error/500.njk
@@ -1,18 +1,20 @@
-<!-- error-500.page -->
+---
+title: 500
+---
 {% set pageBase = "../../" %}
-{% set pageId = "500" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Server-Fehler</h3>
   <p>Allgemeiner Server Fehler!!! <dfn>Internal Server Error</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
diff --git a/source/screens/demo/pages/error/503.njk b/source/screens/demo/pages/error/503.njk
index 4ca521d..f215a54 100644
--- a/source/screens/demo/pages/error/503.njk
+++ b/source/screens/demo/pages/error/503.njk
@@ -1,18 +1,20 @@
-<!-- error-503.page -->
+---
+title: 503
+---
 {% set pageBase = "../../" %}
-{% set pageId = "503" %}
+{% set pageId = page.fileSlug %}
 {% set bodyClass = "body_status" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}{{ pageId }}{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
 <main class="main_site">
-  <h1>{{ pageId }}</h1>
+  <h1>{{ title }}</h1>
   <h3>Server-Fehler</h3>
   <p>Dienst nicht verfügbar. <dfn>Service Unavailable</dfn></p>
   <blockquote cite="https://de.wikipedia.org/wiki/HTTP-Statuscode#5xx_%E2%80%93_Server-Fehler">
diff --git a/source/screens/demo/pages/maintenance.njk b/source/screens/demo/pages/maintenance.njk
index 03faa16..b9cd3fe 100644
--- a/source/screens/demo/pages/maintenance.njk
+++ b/source/screens/demo/pages/maintenance.njk
@@ -1,17 +1,20 @@
-<!-- maintenance.page -->
+---
+title: Maintenance
+---
 {% set pageBase = "../" %}
-{% set pageId = "blank" %}
+{% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
 
 {% extends "demo/_maintenance.njk" %}
 
-{% block title %}Maintenance{% endblock %}
+{% block title %}{{ title }}{% endblock %}
 
 {% block head %}
 {{ super() }}
 {% endblock %}
 
 {% block body %}
+<!-- {{ page.fileSlug }}.page -->
 <div id="root" class="overflow">
   <h1 class="txt_hero txt_center txt_gradient">HIPPIE</h1>
 </div>
diff --git a/source/screens/demo/pages/pages.json b/source/screens/demo/pages/pages.json
new file mode 100644
index 0000000..bc9f264
--- /dev/null
+++ b/source/screens/demo/pages/pages.json
@@ -0,0 +1,3 @@
+{
+	"tags": "page"
+}