diff --git a/assets/less/mio/classes/header.less b/assets/less/mio/classes/header.less
index a3d88213..da9c4516 100644
--- a/assets/less/mio/classes/header.less
+++ b/assets/less/mio/classes/header.less
@@ -2,90 +2,233 @@
 
 .header {
     display: flex;
-    margin: 4px 0;
+    align-items: center;
+    padding: 2px 0;
 
     @media (max-width: @mio-header-mobile) {
         flex-direction: column;
-        align-items: center;
     }
 
-    &__logo {
-        flex-grow: 0;
-        flex-shrink: 0;
-
-        &__link {
-            color: inherit;
-            text-decoration: none;
-            cursor: pointer;
-            display: block;
-        }
-
-        &__image {
-            vertical-align: bottom;
-
-            @media (max-width: @mio-header-mobile) {
-                max-width: 200px;
-                max-height: 100px;
-                margin-bottom: 4px;
-            }
-        }
-    }
-
-    &__menu {
-        flex-grow: 1;
-        flex-shrink: 1;
-        display: flex;
-        align-items: flex-start;
-        justify-content: flex-end;
-
-        @media (max-width: @mio-header-mobile) {
+    @media (max-width: @mio-header-mobile) {
+        &__icons {
+            display: flex;
+            justify-content: space-between;
             width: 100%;
         }
     }
 
-    &__user {
-        border: 1px solid #9475b2;
-        display: inline-block;
+    &__icon {
+        display: none;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
 
-        &__content {
-            margin: 2px;
-            display: flex;
+        &--menu {
+            background-image: url('https://static.flash.moe/images/mobile-menu.png');
+            background-size: 40px;
+        }
+
+        @media (max-width: @mio-header-mobile) {
+            display: block;
+        }
+    }
+
+    &__logo {
+        flex: 0 0 auto;
+        color: inherit;
+        text-decoration: none;
+        cursor: pointer;
+        display: block;
+        background: url('https://static.flash.moe/images/imouto-transparent.png') no-repeat center / cover;
+        width: 60px;
+        height: 60px;
+        font-size: 0;
+
+        @media (max-width: @mio-header-mobile) {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    &__menu {
+        flex: 1 1 auto;
+        margin: 0 6px;
+        font-family: @mio-font-heading;
+        list-style: none;
+        display: flex;
+
+        @media (max-width: @mio-header-mobile) {
+            display: none;
+            font-size: 1.6em;
+            line-height: 1.5em;
+        }
+
+        &-toggle {
+            display: none;
+
+            &:checked ~ .header__menu {
+                display: block;
+            }
+        }
+
+        @media (max-width: @mio-header-mobile) {
+            width: 100%;
+
+            &__item {
+                background: #c2affe;
+
+                &:not(:last-child) {
+                    border-bottom: 1px solid #9475b2;
+                }
+            }
+
+            &__link {
+                width: 100%;
+                display: block;
+                padding: 4px 8px;
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+
+        @media (min-width: @mio-header-mobile) {
+            &__item {
+                text-align: center;
+                transition: background-color .2s;
+
+                &:hover {
+                    background-color: #c2affe;
+
+                    .header__submenu {
+                        transform: scaleY(1);
+                    }
+                }
+            }
+
+            &__link {
+                font-size: 1.2em;
+                color: inherit;
+                text-decoration: none;
+                display: block;
+                padding: 6px 4px;
+                min-width: 100px;
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__submenu {
+        list-style: none;
+        display: block;
+
+        @media (max-width: @mio-header-mobile) {
+            &__link {
+                padding: 2px 16px;
+                display: block;
+                width: 100%;
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+
+        @media (min-width: @mio-header-mobile) {
+            position: absolute; // floating
+            transform: scaleY(0);
+            transform-origin: center top 0;
+            background: #c2affe;
+            overflow: hidden;
+            z-index: 100;
+            text-align: left;
+            box-shadow: 0 1px 2px #9475b2;
+            transition: transform .2s;
+
+            &:hover {
+                transform: scaleY(1);
+            }
+
+            &__link {
+                color: inherit;
+                text-decoration: none;
+                display: block;
+                padding: 2px 6px;
+                min-width: 100px;
+            }
+        }
+    }
+
+    &__user {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row-reverse;
+        order: 3;
+
+        @media (max-width: @mio-header-mobile) {
+            display: none;
+        }
+
+        &-toggle {
+            display: none;
+
+            &:checked ~ .header__user {
+                display: flex;
+            }
         }
 
         &__avatar {
             width: 60px;
             height: 60px;
-        }
-
-        &__links {
-            text-align: right;
-            list-style: none;
-            margin: 0 2px;
-            line-height: 1.5em;
-
-            &__container {
-                flex-grow: 1;
-            }
 
             @media (max-width: @mio-header-mobile) {
-                font-size: 1.5em;
+                display: none;
             }
         }
 
-        &__link {
+        &__info {
+            padding: 1px;
+            margin-right: 4px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            justify-content: center;
+        }
+
+        &__name {
             color: inherit;
+            font-size: 1.4em;
+            line-height: 1.4em;
+            font-family: @mio-font-heading;
             text-decoration: none;
             display: block;
-            min-width: 70px;
+            display: inline-flex;
+            align-items: flex-end;
+            justify-content: right;
 
             &:hover {
                 text-decoration: underline;
             }
         }
 
-        @media (max-width: @mio-header-mobile) {
-            width: 100%;
-            margin: 0;
+        &__actions {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: right;
+            list-style: none;
+            max-width: 100px;
+            font-size: .9em;
+            line-height: 1.4em;
+        }
+
+        &__action {
+            padding-left: 6px;
+        }
+
+        &__link {
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
         }
     }
 }
diff --git a/assets/less/mio/classes/input/button.less b/assets/less/mio/classes/input/button.less
index d907b104..3c147a4d 100644
--- a/assets/less/mio/classes/input/button.less
+++ b/assets/less/mio/classes/input/button.less
@@ -27,11 +27,11 @@
         }
 
         &:hover {
-            background-color: #A586c3;
+            background-color: #a586c3;
         }
 
         &:active {
-            background-color: #8364a1;
+            background-color: #c2affe;
         }
     }
 }
diff --git a/views/mio/_layout/header.twig b/views/mio/_layout/header.twig
new file mode 100644
index 00000000..b98ce37b
--- /dev/null
+++ b/views/mio/_layout/header.twig
@@ -0,0 +1,86 @@
+<nav class="header">
+    <div class="header__icons">
+        <label class="header__icon header__icon--menu" for="toggle-mobile-header-menu"></label>
+
+        <a class="header__logo" href="/">
+            {{ globals.site_name }}
+        </a>
+
+        <label style="background-image:url('/profile.php?u={{ app.hasActiveSession ? current_user.user_id : 0 }}&amp;m=avatar');"
+            class="avatar header__icon header__icon--user"
+            for="toggle-mobile-header-user"></label>
+    </div>
+
+    <input type="checkbox" class="header__menu-toggle" id="toggle-mobile-header-menu">
+    <ul class="header__menu">
+        <li class="header__menu__item">
+            <a href="/" class="header__menu__link">Home</a>
+            <ul class="header__submenu">
+                <li class="header__submenu__item"><a href="/changelog.php" class="header__submenu__link">Changelog</a></li>
+                <li class="header__submenu__item"><a href="/info.php?t=contact" class="header__submenu__link">Contact</a></li>
+                <li class="header__submenu__item"><a href="/info.php?t=rules" class="header__submenu__link">Rules</a></li>
+            </ul>
+        </li>
+        <li class="header__menu__item"><a href="/news.php" class="header__menu__link">News</a></li>
+        <li class="header__menu__item"><a href="/forum/" class="header__menu__link">Forum</a></li>
+        <li class="header__menu__item"><a href="https://chat.flashii.net" class="header__menu__link">Chat</a></li>
+        <li class="header__menu__item"><a href="/members.php" class="header__menu__link">Members</a></li>
+    </ul>
+
+    <input type="checkbox" class="header__user-toggle" id="toggle-mobile-header-user">
+    <div class="header__user">
+        {% if app.hasActiveSession %}
+            <a  href="/profile.php?u={{ current_user.user_id }}"
+                class="avatar header__user__avatar"
+                style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');"></a>
+        {% else %}
+            <a  href="/auth.php?m=login"
+                class="avatar header__user__avatar"
+                style="background-image:url('/profile.php?u=0&amp;m=avatar');"></a>
+        {% endif %}
+
+        <div class="header__user__info">
+            {% if app.hasActiveSession %}
+                <a  href="/profile.php?u={{ current_user.user_id }}"
+                    class="header__user__name"
+                    style="{{ current_user.user_colour|html_colour({
+                        'color': '%s',
+                        'text-shadow': '0 0 5px %s',
+                    }) }}">
+                    {{ current_user.username }}
+                </a>
+            {% else %}
+                <a  href="/auth.php?m=login"
+                    class="header__user__name">
+                    Guest
+                </a>
+            {% endif %}
+
+            <ul class="header__user__actions">
+                {% if app.hasActiveSession %}
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
+                    </li>
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/settings.php">Settings</a>
+                    </li>
+                    {% if has_manage_access %}
+                        <li class="header__user__action">
+                            <a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a>
+                    </li>
+                    {% endif %}
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Log out</a>
+                    </li>
+                {% else %}
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/auth.php?m=login">Log in</a>
+                    </li>
+                    <li class="header__user__action">
+                        <a class="header__user__link" href="/auth.php?m=register">Register</a>
+                    </li>
+                {% endif %}
+            </ul>
+        </div>
+    </div>
+</nav>
diff --git a/views/mio/changelog/change.twig b/views/mio/changelog/change.twig
index 7f6be163..84185511 100644
--- a/views/mio/changelog/change.twig
+++ b/views/mio/changelog/change.twig
@@ -1,5 +1,4 @@
 {% extends '@mio/changelog/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 {% from '@mio/_layout/comments.twig' import comments_section %}
 
 {% set is_valid = change|length > 0 %}
@@ -105,6 +104,4 @@
             {{ comments_section(comments, comments_category, current_user|default(null), comments_perms) }}
         </div>
     {% endif %}
-
-    {{ navigation(mio_navigation) }}
 {% endblock %}
diff --git a/views/mio/changelog/index.twig b/views/mio/changelog/index.twig
index 24bba7a0..28dcfbc8 100644
--- a/views/mio/changelog/index.twig
+++ b/views/mio/changelog/index.twig
@@ -1,5 +1,5 @@
 {% extends '@mio/changelog/master.twig' %}
-{% from '@mio/macros.twig' import navigation, pagination %}
+{% from '@mio/macros.twig' import pagination %}
 {% from '@mio/changelog/macros.twig' import changelog_listing %}
 {% from '@mio/_layout/comments.twig' import comments_section %}
 
@@ -46,6 +46,4 @@
             {{ comments_section(comments, comments_category, current_user|default(null), comments_perms) }}
         </div>
     {% endif %}
-
-    {{ navigation(mio_navigation) }}
 {% endblock %}
diff --git a/views/mio/errors/master.twig b/views/mio/errors/master.twig
index 5f7e5e42..40188094 100644
--- a/views/mio/errors/master.twig
+++ b/views/mio/errors/master.twig
@@ -1,5 +1,4 @@
 {% extends '@mio/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 
 {% block content %}
     <div class="container">
@@ -18,8 +17,6 @@
         </div>
     </div>
 
-    {{ navigation(mio_navigation) }}
-
     {% if error_code|default(0) >= 500 %}
         <audio autoplay>
             <source src="https://static.flash.moe/sounds/wbrb.ogg" type="audio/ogg">
diff --git a/views/mio/forum/forum.twig b/views/mio/forum/forum.twig
index 719849d8..ddabb863 100644
--- a/views/mio/forum/forum.twig
+++ b/views/mio/forum/forum.twig
@@ -1,5 +1,5 @@
 {% extends '@mio/forum/master.twig' %}
-{% from '@mio/macros.twig' import navigation, pagination %}
+{% from '@mio/macros.twig' import pagination %}
 {% from '@mio/forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons %}
 
 {% set title = forum_info.forum_name %}
@@ -30,6 +30,4 @@
         {{ fcpagination }}
         {{ fcbuttons }}
     {% endif %}
-
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}
diff --git a/views/mio/forum/index.twig b/views/mio/forum/index.twig
index bbd23035..6190caa3 100644
--- a/views/mio/forum/index.twig
+++ b/views/mio/forum/index.twig
@@ -1,5 +1,4 @@
 {% extends '@mio/forum/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 {% from '@mio/forum/macros.twig' import forum_category_listing %}
 
 {% set title = 'Forum Listing' %}
@@ -30,6 +29,4 @@
             </div>
         </div>
     {% endif %}
-
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}
diff --git a/views/mio/forum/posting.twig b/views/mio/forum/posting.twig
index 1306c170..82613eb5 100644
--- a/views/mio/forum/posting.twig
+++ b/views/mio/forum/posting.twig
@@ -15,5 +15,4 @@
 {% block content %}
     {{ navigation(posting_breadcrumbs, posting_breadcrumbs|last, true, null, 'left') }}
     {{ forum_posting_form(form_title, form_target_id, posting_topic is defined) }}
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}
diff --git a/views/mio/forum/topic.twig b/views/mio/forum/topic.twig
index 1e7bc290..3907f568 100644
--- a/views/mio/forum/topic.twig
+++ b/views/mio/forum/topic.twig
@@ -51,6 +51,4 @@
             });
         </script>
     {% endif %}
-
-    {{ navigation(mio_navigation, '/forum/') }}
 {% endblock %}
diff --git a/views/mio/home/index.twig b/views/mio/home/index.twig
index c4172e5d..ccaba672 100644
--- a/views/mio/home/index.twig
+++ b/views/mio/home/index.twig
@@ -1,5 +1,4 @@
 {% extends '@mio/home/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 {% from '@mio/news/macros.twig' import news_preview %}
 {% from '@mio/changelog/macros.twig' import changelog_listing %}
 
@@ -48,8 +47,6 @@
         </div>
     </div>
 
-    {{ navigation(mio_navigation, '/') }}
-
     {% if embed_linked_data is defined and embed_linked_data %}
         <script type="application/ld+json">
         {
diff --git a/views/mio/master.twig b/views/mio/master.twig
index e12b3040..5d5ca96b 100644
--- a/views/mio/master.twig
+++ b/views/mio/master.twig
@@ -1,13 +1,3 @@
-{% from '@mio/macros.twig' import navigation %}
-
-{% set mio_navigation = {
-    'Home': '/',
-    'News': '/news.php',
-    'Forum': '/forum/',
-    'Chat': 'https://chat.flashii.net',
-    'Members': '/members.php',
-} %}
-
 <!doctype html>
 <html>
     <head>
@@ -19,37 +9,7 @@
     </head>
     <body class="mio">
         <div class="mio__wrapper">
-            <nav class="header">
-                <div class="header__logo">
-                    <a href="/" class="header__logo__link">
-                        <img class="header__logo__image" src="https://static.flash.moe/logos/logo-exo.png" alt="Flashii">
-                    </a>
-                </div>
-
-                <div class="header__menu">
-                    {% if app.hasActiveSession %}
-                        <div class="container header__user">
-                            <div class="container__title">Hey, {{ current_user.username }}!</div>
-                            <div class="header__user__content">
-                                <a href="/settings.php?m=images" class="avatar header__user__avatar" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');"></a>
-
-                                <div class="header__user__links__container">
-                                    <ul class="header__user__links">
-                                        <li class="header__user__option"><a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a></li>
-                                        <li class="header__user__option"><a class="header__user__link" href="/settings.php">Settings</a></li>
-                                        {% if has_manage_access %}
-                                            <li class="header__user__option"><a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a></li>
-                                        {% endif %}
-                                        <li class="header__user__option"><a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a></li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    {% else %}
-                        <a href="/auth.php" class="input__button">Login/Register</a>
-                    {% endif %}
-                </div>
-            </nav>
+            {% include '_layout/header.twig' %}
 
             {% block content %}
                 <div class="container">
@@ -58,8 +18,6 @@
                         This page has no content!
                     </div>
                 </div>
-
-                {{ navigation(mio_navigation) }}
             {% endblock %}
 
             <footer class="footer">
diff --git a/views/mio/news/category.twig b/views/mio/news/category.twig
index 623aa0f9..4803ed5b 100644
--- a/views/mio/news/category.twig
+++ b/views/mio/news/category.twig
@@ -8,7 +8,7 @@
     'o': posts_offset,
 }) %}
 
-{% block news_content %}
+{% block content %}
     <div class="container news__container">
         <div class="container__title news__container__title">News » {{ category.category_name }}</div>
         <div class="news__container__content">
diff --git a/views/mio/news/index.twig b/views/mio/news/index.twig
index e446879d..6e1c683d 100644
--- a/views/mio/news/index.twig
+++ b/views/mio/news/index.twig
@@ -5,7 +5,7 @@
 {% set title = 'News' %}
 {% set canonical_url = '/news.php'|url_construct({'o':posts_offset}) %}
 
-{% block news_content %}
+{% block content %}
     <div class="container news__container">
         <div class="container__title news__container__title">News</div>
         <div class="news__container__content">
diff --git a/views/mio/news/master.twig b/views/mio/news/master.twig
index 5a53f493..187fe3a8 100644
--- a/views/mio/news/master.twig
+++ b/views/mio/news/master.twig
@@ -1,15 +1 @@
 {% extends '@mio/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
-
-{% block content %}
-    {% block news_content %}
-        <div class="container">
-            <div class="container__title">News!</div>
-            <div class="container__content">
-                <p>Welcome to News, the news is still heavily in development. You can follow us on News where we'll post news every so often, we'll also announce when the news is ready for public use there!</p>
-            </div>
-        </div>
-    {% endblock %}
-
-    {{ navigation(mio_navigation, '/news.php') }}
-{% endblock %}
diff --git a/views/mio/news/post.twig b/views/mio/news/post.twig
index 1c04b93d..619a9f78 100644
--- a/views/mio/news/post.twig
+++ b/views/mio/news/post.twig
@@ -4,7 +4,7 @@
 {% set title = post.post_title ~ ' :: News' %}
 {% set canonical_url = '/news.php?p=' ~ post.post_id %}
 
-{% block news_content %}
+{% block content %}
     <div class="container news__post">
         <div class="container__title">
             <a href="/news.php?c={{ post.category_id }}" class="container__title__link">{{ post.category_name }}</a> »
diff --git a/views/mio/settings/master.twig b/views/mio/settings/master.twig
index 96b4dfae..22f9f876 100644
--- a/views/mio/settings/master.twig
+++ b/views/mio/settings/master.twig
@@ -29,6 +29,4 @@
             </div>
         {% endblock %}
     {% endblock %}
-
-    {{ navigation(mio_navigation) }}
 {% endblock %}
diff --git a/views/mio/user/listing.twig b/views/mio/user/listing.twig
index 2593e81b..28a63e9e 100644
--- a/views/mio/user/listing.twig
+++ b/views/mio/user/listing.twig
@@ -1,5 +1,5 @@
 {% extends '@mio/user/master.twig' %}
-{% from '@mio/macros.twig' import navigation, pagination %}
+{% from '@mio/macros.twig' import pagination %}
 
 {% set canonical_url = '/members.php'|url_construct({
     'r': role.role_id != 1 ? role.role_id : 0,
@@ -131,5 +131,4 @@
     </div>
 
     {{ pagination(role.role_user_count, users_take, users_offset, full_url) }}
-    {{ navigation(mio_navigation, '/members.php') }}
 {% endblock %}
diff --git a/views/mio/user/notfound.twig b/views/mio/user/notfound.twig
index 1e2106d6..2f0bb2aa 100644
--- a/views/mio/user/notfound.twig
+++ b/views/mio/user/notfound.twig
@@ -1,5 +1,4 @@
 {% extends '@mio/user/master.twig' %}
-{% from '@mio/macros.twig' import navigation %}
 
 {% set title = 'User not found!' %}
 
@@ -10,6 +9,4 @@
             <p>Check the url and try again.</p>
         </div>
     </div>
-
-    {{ navigation(mio_navigation, false) }}
 {% endblock %}
diff --git a/views/mio/user/view.twig b/views/mio/user/view.twig
index 22cb0f09..019a7b94 100644
--- a/views/mio/user/view.twig
+++ b/views/mio/user/view.twig
@@ -64,9 +64,12 @@
 } %}
 
 {% block content %}
-    {{ navigation(mio_navigation, false, true) }}
+    {# navigation({
+        (profile.username): 'profile',
+        'Comments': 'comments',
+    }, 'profile', true, '#%s') #}
 
-    <div class="profile">
+    <div class="profile" id="profile">
         <div class="container profile__header">
             <div class="container__title">Profile of {{ profile.username }}</div>
             <div class="profile__header__content">