diff --git a/assets/less/mio/classes/container.less b/assets/less/mio/classes/container.less
index 15a6aa20..c32b0c22 100644
--- a/assets/less/mio/classes/container.less
+++ b/assets/less/mio/classes/container.less
@@ -4,7 +4,7 @@
     margin: 2px 0;
     box-shadow: 0 1px 2px #9475b2;
 
-    .mio--dark & {
+    .main--dark & {
         background-color: #23172a;
     }
 
diff --git a/assets/less/mio/classes/footer.less b/assets/less/mio/classes/footer.less
index 7a6593b5..7897fb80 100644
--- a/assets/less/mio/classes/footer.less
+++ b/assets/less/mio/classes/footer.less
@@ -1,4 +1,5 @@
 .footer {
+    flex: 0 0 auto;
     text-align: center;
     font-size: .9em;
     line-height: 1.5em;
diff --git a/assets/less/mio/classes/header.less b/assets/less/mio/classes/header.less
index 9b5b6761..476fb84d 100644
--- a/assets/less/mio/classes/header.less
+++ b/assets/less/mio/classes/header.less
@@ -1,12 +1,19 @@
 @mio-header-mobile: 700px;
 
 .header {
-    display: flex;
-    align-items: center;
-    padding: 2px 0;
+    flex: 0 0 auto;
+    //background: linear-gradient(0deg, transparent, #c2affe) repeat-x;
 
-    @media (max-width: @mio-header-mobile) {
-        flex-direction: column;
+    &__wrapper {
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        padding: 3px 1px;
+        max-width: @site-max-width;
+
+        @media (max-width: @mio-header-mobile) {
+            flex-direction: column;
+        }
     }
 
     @media (max-width: @mio-header-mobile) {
diff --git a/assets/less/mio/classes/input/select.less b/assets/less/mio/classes/input/select.less
index 761d05cd..cf2478b9 100644
--- a/assets/less/mio/classes/input/select.less
+++ b/assets/less/mio/classes/input/select.less
@@ -9,7 +9,7 @@
     }
 }
 
-.mio--dark .input__select {
+.main--dark .input__select {
     background: #111;
     color: #fff;
 }
diff --git a/assets/less/mio/classes/input/text.less b/assets/less/mio/classes/input/text.less
index e58e6d21..15383a65 100644
--- a/assets/less/mio/classes/input/text.less
+++ b/assets/less/mio/classes/input/text.less
@@ -13,7 +13,7 @@
     }
 }
 
-.mio--dark .input__text {
+.main--dark .input__text {
     background: #111;
     color: #fff;
 }
diff --git a/assets/less/mio/classes/input/textarea.less b/assets/less/mio/classes/input/textarea.less
index 43707219..bebd969b 100644
--- a/assets/less/mio/classes/input/textarea.less
+++ b/assets/less/mio/classes/input/textarea.less
@@ -10,7 +10,7 @@
     }
 }
 
-.mio--dark .input__textarea {
+.main--dark .input__textarea {
     background: #111;
     color: #fff;
 }
diff --git a/assets/less/mio/classes/navigation.less b/assets/less/mio/classes/navigation.less
index a1e70f83..300784cf 100644
--- a/assets/less/mio/classes/navigation.less
+++ b/assets/less/mio/classes/navigation.less
@@ -105,7 +105,7 @@
     }
 }
 
-.mio--dark {
+.main--dark {
     .navigation,
     .navigation__option {
         border-color: #9475b2;
diff --git a/assets/less/mio/main.less b/assets/less/mio/main.less
index c95739ea..e297e367 100644
--- a/assets/less/mio/main.less
+++ b/assets/less/mio/main.less
@@ -1,5 +1,6 @@
 @mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
 @mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+@site-max-width: 1200px;
 
 * {
     margin: 0;
@@ -14,7 +15,9 @@ body {
     height: 100%;
 }
 
-.mio {
+.main {
+    display: flex;
+    flex-direction: column;
     background-color: #fbeeff;
     background-image: linear-gradient(180deg, #c2affe, transparent);
     background-repeat: repeat-x;
@@ -23,11 +26,12 @@ body {
     color: #000;
 
     &__wrapper {
-        max-width: 1200px;
+        max-width: @site-max-width;
         margin: 0 auto;
         padding: 1px;
+        flex: 1 0 auto;
 
-        @media (max-width: 1201px) {
+        @media (max-width: @site-max-width + 1) {
             margin: 0 1px;
         }
     }
diff --git a/views/mio/_layout/header.twig b/views/mio/_layout/header.twig
index b98ce37b..1ed283d9 100644
--- a/views/mio/_layout/header.twig
+++ b/views/mio/_layout/header.twig
@@ -1,86 +1,88 @@
 <nav class="header">
-    <div class="header__icons">
-        <label class="header__icon header__icon--menu" for="toggle-mobile-header-menu"></label>
+    <div class="header__wrapper">
+        <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>
+            <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>
+            <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__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">
+        <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="header__user__name"
-                    style="{{ current_user.user_colour|html_colour({
-                        'color': '%s',
-                        'text-shadow': '0 0 5px %s',
-                    }) }}">
-                    {{ current_user.username }}
-                </a>
+                    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="header__user__name">
-                    Guest
-                </a>
+                    class="avatar header__user__avatar"
+                    style="background-image:url('/profile.php?u=0&amp;m=avatar');"></a>
             {% endif %}
 
-            <ul class="header__user__actions">
+            <div class="header__user__info">
                 {% 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>
+                    <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 %}
-                    <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>
+                    <a  href="/auth.php?m=login"
+                        class="header__user__name">
+                        Guest
+                    </a>
                 {% endif %}
-            </ul>
+
+                <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>
     </div>
 </nav>
diff --git a/views/mio/master.twig b/views/mio/master.twig
index 5d5ca96b..72de0e54 100644
--- a/views/mio/master.twig
+++ b/views/mio/master.twig
@@ -7,10 +7,10 @@
         <link href="{{ '/css/mio.css'|asset_url }}" rel="stylesheet">
         <link href="{{ '/css/libraries.css'|asset_url }}" rel="stylesheet">
     </head>
-    <body class="mio">
-        <div class="mio__wrapper">
-            {% include '_layout/header.twig' %}
+    <body class="main">
+        {% include '_layout/header.twig' %}
 
+        <div class="main__wrapper">
             {% block content %}
                 <div class="container">
                     <div class="container__title">Hello!</div>
@@ -19,30 +19,31 @@
                     </div>
                 </div>
             {% endblock %}
-
-            <footer class="footer">
-                {% autoescape false %}
-                <div class="footer__copyright">
-                    {{ 'https://flash.moe'|html_link('Flashwave', 'footer__copyright__link') }} 2013-{{
-                    ''|date('Y') }} /
-                    {{ ('https://github.com/flashwave/misuzu/tree/' ~ git_branch())|html_link(git_branch(), 'footer__copyright__link') }}
-                    # {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__copyright__link') }}
-                    {% if query_count is defined %}
-                        / SQL Queries: {{ query_count|number_format }}
-                        / Took: {{ app.timeSinceStart|number_format(5) }} seconds
-                    {% endif %}
-                </div>
-
-                <div class="footer__links">
-                    {{ '#'|html_link('Rules', 'footer__links__link') }} |
-                    {{ '#'|html_link('Contact', 'footer__links__link') }} |
-                    {{ '#'|html_link('Status', 'footer__links__link') }} |
-                    {{ '/changelog.php'|html_link('Changelog', 'footer__links__link') }} |
-                    {{ 'https://twitter.com/flashiinet'|html_link('Twitter', 'footer__links__link') }}
-                </div>
-                {% endautoescape %}
-            </footer>
         </div>
+
+        <footer class="footer">
+            {% autoescape false %}
+            <div class="footer__copyright">
+                {{ 'https://flash.moe'|html_link('Flashwave', 'footer__copyright__link') }} 2013-{{
+                ''|date('Y') }} /
+                {{ ('https://github.com/flashwave/misuzu/tree/' ~ git_branch())|html_link(git_branch(), 'footer__copyright__link') }}
+                # {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__copyright__link') }}
+                {% if query_count is defined %}
+                    / SQL Queries: {{ query_count|number_format }}
+                    / Took: {{ app.timeSinceStart|number_format(5) }} seconds
+                {% endif %}
+            </div>
+
+            <div class="footer__links">
+                {{ '#'|html_link('Rules', 'footer__links__link') }} |
+                {{ '#'|html_link('Contact', 'footer__links__link') }} |
+                {{ '#'|html_link('Status', 'footer__links__link') }} |
+                {{ '/changelog.php'|html_link('Changelog', 'footer__links__link') }} |
+                {{ 'https://twitter.com/flashiinet'|html_link('Twitter', 'footer__links__link') }}
+            </div>
+            {% endautoescape %}
+        </footer>
+
         <script src="{{ '/js/libraries.js'|asset_url }}" charset="utf-8"></script>
         <script>
             window.addEventListener('load', () => {