diff --git a/source/screens/demo/examples/portal.njk b/source/screens/demo/examples/portal.njk
index 8c6bb73..5b96681 100644
--- a/source/screens/demo/examples/portal.njk
+++ b/source/screens/demo/examples/portal.njk
@@ -7,7 +7,7 @@ tags:
 {% set bodyClass = "body_portal" %}
 
 {% extends "demo/_default.njk" %}
-{% import "demo/macros/_gates.njk" as gate %}
+{% import "hippie/macros/_gate.njk" as gate %}
 
 {% block title %}{{ title }}{% endblock %}
 
diff --git a/source/screens/demo/examples/songbook.njk b/source/screens/demo/examples/songbook.njk
new file mode 100755
index 0000000..0b91499
--- /dev/null
+++ b/source/screens/demo/examples/songbook.njk
@@ -0,0 +1,51 @@
+---
+title: Songbook
+tags:
+  - demoExample
+---
+{% set pageBase = "../" %}
+{% set pageId = page.fileSlug %}
+
+{% extends "demo/_default.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+{% import "hippie/macros/_song.njk" as song %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block body %}
+<!-- {{ page.fileSlug }}.page -->
+  <div class="sec_main_center">
+    <header class="header_txt">
+      <h1>Titel</h1>
+      <p>Jahr</p>
+    </header>
+    <nav role="doc-toc">
+      <h2>Inhaltsverzeichnis</h2>
+      <ul>
+        {%- for song in collections.song -%}
+          <li>
+            <a href="{{ song.page.url }}">{{ song.data.title }}</a>
+          </li>
+        {%- endfor -%}
+      </ul>
+    </nav>
+    <h2>Vorwort</h2>
+    <p>Liederbuch für
+      <em>Name</em>.</p>
+    <p>Gibt es gebunden und hier
+      {{ ph.link() }}.<br/>
+      Bestellungen bitte an
+      {{ ph.name() }}
+      richten.</p>
+    <hr class="hr_double hr_dotted">
+    {%- for piece in collections.song -%}
+      {{ song.simple(loop.index0, piece.data, piece.content) }}
+    {%- endfor -%}
+    <hr/>
+    <address>{{ ph.name() }}</address>
+  </div>
+{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/songbook/0_artist-title.md b/source/screens/demo/examples/songbook/0_artist-title.md
new file mode 100755
index 0000000..ccf1b5c
--- /dev/null
+++ b/source/screens/demo/examples/songbook/0_artist-title.md
@@ -0,0 +1,26 @@
+---
+tags: 
+  - songbook
+  - song
+title: "Interpret - Titel"
+releaseDate: JJJJ
+description: Text
+---
+~~~
+[verse 1]
+strophe 1
+
+[chorus]
+refrain
+
+[verse 2]
+strophe 2
+
+[chorus]
+[bridge]
+überleitung
+
+[interlude]
+[chorus]
+[outro]
+~~~
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index edc4d47..c567309 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -8,7 +8,7 @@ tags:
 {% set bodyClass = "body_new" %}
 
 {% extends "demo/_app.njk" %}
-{% import "demo/macros/_states.njk" as state %}
+{% import "hippie/macros/_state.njk" as state %}
 
 {% block title %}{{ title }}
 {% endblock %}
diff --git a/source/style/demo.scss b/source/style/demo.scss
index e46a622..b3d4100 100644
--- a/source/style/demo.scss
+++ b/source/style/demo.scss
@@ -11,5 +11,6 @@
 // -----------------------------------------------------------------------------
 @import "modules/card/card_module";
 @import "modules/portal/portal_module";
+@import "modules/songbook/songbook_module";
 @import "modules/demo/demo_module";
 // @import "modules/YOUR-MODULE/YOUR-FILES";
diff --git a/source/style/modules/songbook/_songbook_module.scss b/source/style/modules/songbook/_songbook_module.scss
new file mode 100755
index 0000000..321f8bd
--- /dev/null
+++ b/source/style/modules/songbook/_songbook_module.scss
@@ -0,0 +1,20 @@
+.songbook_song {
+	pre {
+		@extend .pre_code
+	}
+
+	header {
+		h2 {
+			margin-bottom: $space_basic;
+		}
+
+		h6 {
+			color: $color_brightest;
+		}
+
+		h2+h6 {
+			margin-top: 0;
+			margin-bottom: $space_small;
+		}
+	}
+}
\ No newline at end of file
diff --git a/source/templates/demo/macros/_gates.njk b/source/templates/hippie/macros/_gate.njk
similarity index 100%
rename from source/templates/demo/macros/_gates.njk
rename to source/templates/hippie/macros/_gate.njk
diff --git a/source/templates/hippie/macros/_song.njk b/source/templates/hippie/macros/_song.njk
new file mode 100644
index 0000000..79083c0
--- /dev/null
+++ b/source/templates/hippie/macros/_song.njk
@@ -0,0 +1,12 @@
+{% macro simple(index, data, content) %}
+  <article class="songbook_song">
+    <header>
+      <h2>{{ data.title }}</h2>
+      <h6>{{ data.releaseDate }}</h6>
+      <p>{{ data.description }}</p>
+    </header>
+    {# <pre class="pre_code"><code>{{ content }}</code></pre> #}
+    {{ content | safe }}
+    <footer>{{ index }}</footer>
+  </article>
+{% endmacro %}
\ No newline at end of file
diff --git a/source/templates/demo/macros/_states.njk b/source/templates/hippie/macros/_state.njk
similarity index 100%
rename from source/templates/demo/macros/_states.njk
rename to source/templates/hippie/macros/_state.njk