diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index a51d472..5216e0a 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -1,8 +1,9 @@
+$transition: 280ms all 120ms ease-out;
+
 header {
-    margin: -25px -25px 0px -25px;
     background: $background_accent_1;
-    padding: 20px 30px;
-    box-shadow: 5px 5px 5px 10px $background_accent_1;
+    top: 0;
+    box-shadow: 0px -10000px 0px 10000px $background_accent_1;
     h1 a, h1 a:hover, h1 a:link, h1 a:visited {
         font-family: $headline_font, sans-serif;
         color: $font_accent_1;
@@ -11,31 +12,155 @@ header {
         font-size: $font_size_h1;
         text-decoration: none;
     }
-    nav ul {
-        font-size: $font_size_default;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        a, a:link, a:visited {
-            color: $font_accent_2;
-            text-decoration: none;
-            background: $shadow_accent_1;
-            padding: 8px 24px;
-            border-radius: 5px;
-            text-transform: $menu_text_transform;
+    nav {
+        grid-template-rows: auto 1fr auto;
+        padding: 0 1rem;
+        position: sticky;
+        display: grid;
+        place-items: flex-start;
+        margin-left: -25px;
+        background: $menu_background_color;
+        box-shadow: 300px 0px 0px 0px $menu_background_color,
+                   -300px 0px 0px 0px $menu_background_color;
+        .title_dropdown {
+            background-color: transparent;
+            border: none;
+            font-family: inherit;
         }
-        a:hover, a:active {
-            color: $font_accent_2_hover;
-            box-shadow: 0px 0px 1px 1px $shadow_accent_1;
+        > ul {
+            grid-auto-flow: column;
+            > li {
+                margin: 0 0.5rem;
+
+                a, .title_dropdown {
+                    text-decoration: none;
+                    text-align: center;
+                    display: inline-block;
+                    color: #fff;
+                    font-size: $font_size_default;
+
+                    &:focus {
+                        outline: none;
+                    }
+                }
+
+                > a, .title_dropdown {
+                    padding: 1rem 0.5rem;
+                    border-top: 3px solid transparent;
+                    transition: $transition;
+
+                    &:hover, &:focus {
+                        border-top-color: $menu_accent_hover;
+                        color: $menu_accent_hover;
+                    }
+                }
+            }
         }
-        li {
-            display: inline;
-            margin: 0 8px 0 0;
+
+        ul {
+            list-style: none;
+            margin: 0;
             padding: 0;
+            display: grid;
+
+            li {
+                padding: 0;
+                background: $menu_box_background;
+            }
+        }
+    }
+
+    .dropdown {
+        position: relative;
+
+        .title_dropdown {
+            display: inline-flex;
+            align-items: center;
+
+            &:after {
+                 content: "";
+                 border: 0.35rem solid transparent;
+                 border-top-color: rgba(#fff, 0.45);
+                 margin-left: 0.25em;
+                 transform: translateY(0.15em);
+            }
+        }
+
+        .dropdown__menu {
+            position: absolute;
+            min-width: 15ch;
+            left: 50%;
+            top: calc(100% - 0.25rem);
+            transition: $transition;
+            transform: rotateX(-90deg) translateX(-50%);
+            transform-origin: top center;
+            visibility: hidden;
+            opacity: 0.3;
+            padding: 0.5em 0;
+            background-color: $menu_background_dropdown_color;
+            border-radius: 4px;
+            box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
+
+            a {
+                color: $font_menu;
+                display: block;
+                padding: 0.5em;
+                opacity: 0;
+                transition: $transition;
+
+                &:hover {
+                    background-color: $background_accent_1;
+                }
+
+                &:focus {
+                    outline: none;
+                    background-color: $background_accent_1;
+                }
+            }
+        }
+
+        &:after {
+            content: "";
+            border: 0.5rem solid transparent;
+            border-bottom-color: $menu_background_dropdown_color;
+            position: absolute;
+            top: calc(100% - 1.25rem);
+            left: 50%;
+            transform: translateX(-50%);
+            transition: $transition;
+            opacity: 0;
+            will-change: opacity;
+        }
+
+        &:hover, &:focus-within {
+            .title_dropdown {
+                border-top-color: $menu_accent_hover;
+            }
+
+            .dropdown__menu {
+                opacity: 1;
+                transform: rotateX(0) translateX(-50%);
+                visibility: visible;
+
+                a {
+                    opacity: 1;
+                }
+            }
+
+            &:after {
+                opacity: 1;
+            }
+        }
+
+
+        p {
+            font-size: $font_size_default;
+            line-height: 1.5;
         }
     }
 }
 
+
 @media (min-width: $large_view) {
     header {
         max-width: $large_min_width;
@@ -44,8 +169,19 @@ header {
         h1 a, h1 a:hover, h1 a:link {
             font-size: $font_size_h1_large;
         }
-        nav ul {
-            font-size: $font_size_default_large;
+        nav {
+            box-shadow: $large_view 0px 0px 0px $menu_background_color,
+                      -$large_view 0px 0px 0px $menu_background_color;
+            > ul {
+                > li {
+                    a, .title_dropdown {
+                        font-size: $font_size_default_large;
+                    }
+                }
+            }
+            p {
+                font-size: $font_size_default_large;
+            }
         }
     }
 }
@@ -55,12 +191,21 @@ header {
         h1 a, h1 a:hover, h1 a:link {
             font-size: $font_size_h1_mobile;
         }
-        nav ul {
-            font-size: $font_size_default_mobile;
-            a, a:link, a:visited {
-                display: block;
-                padding: 5px 8px;
-                margin: -6px 0px;
+        @if $show_mobile_menu == true {
+            nav {
+                ul {
+                    display: table;
+
+                }
+                .dropdown {
+                    .dropdown__menu {
+                        left: 180%;
+                    }
+                    &:after {
+                        content: none;
+                        opacity: 1;
+                    }
+                }
             }
         }
     }
@@ -71,9 +216,6 @@ header {
         h1 a, h1 a:hover, h1 a:link {
             font-size: $font_size_h1_tiny;
         }
-        nav ul {
-            font-size: $font_size_default_tiny;
-        }
     }
 }
 
diff --git a/assets/scss/_laend_variables.scss b/assets/scss/_laend_variables.scss
index 8f68ca1..bc955c6 100644
--- a/assets/scss/_laend_variables.scss
+++ b/assets/scss/_laend_variables.scss
@@ -1,6 +1,9 @@
-$background_accent_1: rgb(255,255,0);
 $background_accent_1: rgb(255,192,0);
 $background_accent_2: $background_accent_1;
+$menu_background_color: transparent;
+$menu_background_dropdown_color: white;
+$menu_accent_hover: white;
+$menu_box_background: black;
 
 $font_accent_1: black;
 $font_accent_2: white;
@@ -8,6 +11,7 @@ $font_accent_2_hover: silver;
 $font_accent_3: black;
 $font_accent_4: black;
 $font_default: black;
+$font_menu: white;
 $font_default_inverted: white;
 
 $shadow_accent_1: rgba(0,0,0,1);
@@ -43,3 +47,4 @@ $pico_view: 320px;
 $the_laend_yellow: rgb(255, 255, 0);
 $menu_text_transform: uppercase;
 $hide_footer: true;
+$show_mobile_menu: false;
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 8162f24..29f72be 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -1,11 +1,16 @@
 $background_accent_1: rgb(247, 196, 24 );
 $background_accent_2: black;
+$menu_background_color: transparent;
+$menu_background_dropdown_color: white;
+$menu_accent_hover: red;
+$menu_box_background: transparent;
 
 $font_accent_1: red;
 $font_accent_2: maroon;
 $font_accent_2_hover: orangered;
 $font_accent_3: orangered;
 $font_accent_4: rgb(247, 196, 24);
+$font_menu: black;
 $font_default: white;
 
 $shadow_accent_1: rgba(255, 190, 14, 0.5);
@@ -40,3 +45,4 @@ $pico_view: 320px;
 
 $menu_text_transform: none;
 $hide_footer: false;
+$show_mobile_menu: false;
diff --git a/content/kontakt/contents.lr b/content/kontakt/contents.lr
new file mode 100644
index 0000000..987592c
--- /dev/null
+++ b/content/kontakt/contents.lr
@@ -0,0 +1,18 @@
+_model: page
+---
+title: Stream start
+---
+body:
+
+Du veranstaltest ein Event mit Vortragsprogramm, das diese Vorträge gerne für ein größeres Publikum zugänglich machen möchte?
+Du oder Wesen mit denen du gerne Zeit verbringst, haben ein spannedes Projekt, einen cooleen Hack oder eine unterhaltsamme Entdeckung, das Sie gerne der Welt erzählen wollen?
+
+Sehr cool! Dann nimm gerne Kontakt mit uns auf!
+
+```
+video [at] winkekatze.tv
+```
+
+Das Winkekatzen Video Operation Center hilft gerne dabei, Wissen mit der Welt zu teilen. Wir haben gute Erfahrungen damit gesammelt, auch zusammen mit anderen von Streaming begeisterten Hackern kleine oder auch größere Streamingprojekte zu ermöglichen. Zum Beispiel an der Jahresendveranstaltung des Chaos Computer Club sind wir bei [Chaos West TV](https://chaoswest.tv) dabei, das Studio zu betreiben, eine Bühne zu bauen und haben am Ende gemeinsam viele spannende Vorträge gestreamt und veröffentlich.
+
+Auch beim Winterkongress oder der CoSin haben wir mit dem CHVOC, dem Video Operation Center aus der Schweiz zusammen das Vortragsprogramm mit dem Internet geteilt und aufgezeichnet.
diff --git a/databags/navigation.json b/databags/navigation.json
new file mode 100644
index 0000000..a575c96
--- /dev/null
+++ b/databags/navigation.json
@@ -0,0 +1,16 @@
+{
+  "Hällo": {
+    "href": "/haello"
+  },
+  "Veranstaltungen": {
+    "href": "/events"
+  },
+  "Kontakt": {
+    "list_childs": true,
+    "items": {
+      "Kontakt": "/kontakt",
+      "Datenschutz": "/datenschutz",
+      "Impressum": "https://c3woc.de/impressum/"
+    }
+  }
+}
diff --git a/templates/blocks/navigation.html b/templates/blocks/navigation.html
new file mode 100644
index 0000000..08c1500
--- /dev/null
+++ b/templates/blocks/navigation.html
@@ -0,0 +1,56 @@
+{% block navigation %}
+  <nav>
+    <ul>
+      {% for title, mapping in bag("navigation").items() %}
+        {% if mapping.visible|default(true) %}
+          {% if not mapping.list_childs %}
+          <li>
+            <a
+              {% if this._path == mapping.href %} class="active"
+              {% endif %} {{- ' ' -}}
+              href="{{ mapping.href|url }}">
+                {{- title -}}
+            </a>
+          {% else %}
+          <li class="dropdown">
+            <button type="button" class="title_dropdown" aria-expanded="false" aria-controls="sweets-dropdown">
+              {{ title }}
+            </button>
+            <ul class="dropdown__menu">
+            {% set sub_menu = mapping['items'].items() %}
+            {% for sub_title, href in sub_menu %}
+              {% if sub_title != "list_namespace" %}
+                <li>
+                  <a
+                  {% if this._path == href %}
+                    {{- ' class="active"' }}
+                  {% endif %} {{- ' ' -}}
+                  href="{{ href }}">
+                    {{- sub_title -}}
+                  </a>
+                </li>
+              {% else %}
+                {% set children = site.get(href).children %}
+                {% for child in children %}
+                  {% if loop.index <= 3 %}
+                    <li>
+                      <a
+                        {% if this._path + '/' == child.url_path %}
+                          {{- ' class="active"' -}}
+                        {% endif %} {{- ' ' -}}
+                        href="{{ child.url_path }}">
+                        {{- child.title -}}
+                      </a>
+                    </li>
+                  {% endif %}
+                {% endfor %}
+              {% endif %}
+            {% endfor %}
+            </ul>
+          {% endif %}
+          </li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+  </nav>
+{% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
index 7e02eb1..fb51d29 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -39,21 +39,7 @@
         winkekatze.tv
       {%- endblock -%}
         </a></h1>
-    <nav>
-      <ul class="nav navbar-nav">
-        {%- for href, title in [
-          ['/haello', 'Hällo'],
-          ['/events', 'Veranstaltungen'],
-          ['/datenschutz', 'Datenschutzerklärung'],
-          ['https://c3woc.de/impressum/', 'Impressum']
-        ] %}
-        <li
-          {%- if this.is_child_of(href) %} class="active"{%- endif -%}>
-          <a href="{{ href }}">{{ title }}</a>
-        </li>
-        {%- endfor %}
-      </ul>
-    </nav>
+      {%- include "blocks/navigation.html" -%}
   </header>
   <div class="
     {%- block class -%}