diff --git a/assets/less/classes/container.less b/assets/less/classes/container.less
index 7be1461d..ec1333c0 100644
--- a/assets/less/classes/container.less
+++ b/assets/less/classes/container.less
@@ -45,7 +45,8 @@
             width: 100%;
             height: 100%;
             mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
-            background: url('/clouds.png') fixed;
+            -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+            background: var(--background-pattern);
             background-color: var(--accent-colour);
             background-blend-mode: multiply;
         }
diff --git a/assets/less/classes/footer.less b/assets/less/classes/footer.less
index fd8c2c64..9b843858 100644
--- a/assets/less/classes/footer.less
+++ b/assets/less/classes/footer.less
@@ -1,10 +1,5 @@
 .footer {
-    background: linear-gradient(0deg, var(--accent-colour), transparent) repeat-x;
     flex: 0 0 auto;
-    text-align: center;
-    font-size: .9em;
-    line-height: 1.5em;
-    padding: 1em 0;
 
     &__link {
         color: inherit;
@@ -14,4 +9,26 @@
             text-decoration: underline;
         }
     }
+
+    &__wrapper {
+        max-width: var(--site-max-width);
+        margin: 0 auto;
+        text-align: center;
+        font-size: .9em;
+        line-height: 1.5em;
+        padding: 1em 0;
+    }
+
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
+        -webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
+        background: var(--background-pattern);
+        background-color: var(--accent-colour);
+        background-blend-mode: multiply;
+    }
 }
diff --git a/assets/less/classes/forum/post.less b/assets/less/classes/forum/post.less
index b2853d6a..58cbe307 100644
--- a/assets/less/classes/forum/post.less
+++ b/assets/less/classes/forum/post.less
@@ -47,14 +47,31 @@
 
     &__info {
         background-image: linear-gradient(90deg, var(--user-colour), transparent);
-        min-width: 150px;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 15px;
-        flex: 0 0 auto;
-        margin-right: 4px;
+
+        &__content {
+            min-width: 150px;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 15px;
+            flex: 0 0 auto;
+            margin-right: 4px;
+        }
+
+        &__background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
+            -webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
+            background: var(--background-pattern);
+            background-color: var(--accent-colour);
+            background-blend-mode: multiply;
+        }
+
 
         @media (max-width: @site-mobile-width) {
             background-image: linear-gradient(180deg, var(--user-colour), transparent);
diff --git a/assets/less/classes/header.less b/assets/less/classes/header.less
index 0e473d8a..e8e74b3e 100644
--- a/assets/less/classes/header.less
+++ b/assets/less/classes/header.less
@@ -1,6 +1,19 @@
 .header {
     flex: 0 0 auto;
-    background: linear-gradient(0deg, transparent, var(--accent-colour)) repeat-x;
+    margin-bottom: 4px;
+
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+        -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
+        background: var(--background-pattern);
+        background-color: var(--accent-colour);
+        background-blend-mode: multiply;
+    }
 
     &__wrapper {
         margin: 0 auto;
diff --git a/assets/less/main.less b/assets/less/main.less
index e11d2945..63d85d63 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -8,6 +8,7 @@
     --background-image: initial;
     --background-colour: #111;
     --background-colour-translucent: #111E;
+    --background-pattern: url('/images/clouds.png') fixed;
 
     --text-colour: #fff;
     --text-colour-inverted: #000;
diff --git a/templates/_layout/footer.twig b/templates/_layout/footer.twig
new file mode 100644
index 00000000..64d8819f
--- /dev/null
+++ b/templates/_layout/footer.twig
@@ -0,0 +1,18 @@
+<footer class="footer">
+    <div class="footer__background"></div>
+    <div class="footer__wrapper">
+        {% autoescape false %}
+        <div class="footer__copyright">
+            {{ 'https://flash.moe'|html_link('Flashwave', 'footer__link') }} 2013-{{
+            ''|date('Y') }} /
+            {{ ('https://github.com/flashwave/misuzu/tree/' ~ git_tag())|html_link(git_tag(), 'footer__link') }}
+            # {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__link') }}
+            {% if constant('MSZ_DEBUG') or current_user.user_id|default(0) == 1 %}
+                / SQL Queries: {{ sql_query_count()|number_format }}
+                / Took: {{ startup_time()|number_format(5) }} seconds
+                / Render: {{ startup_time(constant('MSZ_TPL_RENDER'))|number_format(5) }} seconds
+            {% endif %}
+        </div>
+        {% endautoescape %}
+    </div>
+</footer>
diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig
index 9e123dac..173012d4 100644
--- a/templates/_layout/header.twig
+++ b/templates/_layout/header.twig
@@ -1,6 +1,7 @@
 {% set in_manage = manage_menu is defined %}
 
 <nav class="header">
+    <div class="header__background"></div>
     <div class="header__wrapper">
         <div class="header__icons">
             <label class="header__icon header__icon--menu" for="toggle-mobile-header-menu">
diff --git a/templates/forum/macros.twig b/templates/forum/macros.twig
index 57e4be51..8a9ff164 100644
--- a/templates/forum/macros.twig
+++ b/templates/forum/macros.twig
@@ -292,27 +292,30 @@
     {% set is_original_post = is_original_post|default(false) %}
     {% set is_original_poster = is_original_poster|default(false) %}
 
-    <div class="container forum__post" id="p{{ post.post_id }}">
-        <div class="forum__post__info" style="{{ post.poster_colour|html_colour }}">
-            {% if post.poster_id is not null %}
-                <a class="avatar forum__post__avatar"
-                    style="background-image:url('/profile.php?u={{ post.poster_id }}&amp;m=avatar');"
-                    href="/profile.php?u={{ post.poster_id }}">
-                </a>
+    <div class="container forum__post" id="p{{ post.post_id }}" style="{{ post.poster_colour|html_colour('--accent-colour') }}">
+        <div class="forum__post__info">
+            <div class="forum__post__info__background"></div>
+            <div class="forum__post__info__content">
+                {% if post.poster_id is not null %}
+                    <a class="avatar forum__post__avatar"
+                        style="background-image:url('/profile.php?u={{ post.poster_id }}&amp;m=avatar');"
+                        href="/profile.php?u={{ post.poster_id }}">
+                    </a>
 
-                <a class="forum__post__username" href="/profile.php?u={{ post.poster_id }}">{{ post.poster_name }}</a>
+                    <a class="forum__post__username" href="/profile.php?u={{ post.poster_id }}">{{ post.poster_name }}</a>
 
-                <div class="forum__post__icons">
-                    <div class="flag flag--{{ post.poster_country|lower }}" title="{{ post.poster_country|country_name }}"></div>
-                    <div class="forum__post__posts-count">{{ post.poster_post_count|number_format }} posts</div>
-                </div>
+                    <div class="forum__post__icons">
+                        <div class="flag flag--{{ post.poster_country|lower }}" title="{{ post.poster_country|country_name }}"></div>
+                        <div class="forum__post__posts-count">{{ post.poster_post_count|number_format }} posts</div>
+                    </div>
 
-                <div class="forum__post__joined">
-                    joined <time datetime="{{ post.poster_joined|date('c') }}" title="{{ post.poster_joined|date('r') }}">{{ post.poster_joined|time_diff }}</time>
-                </div>
-            {% else %}
-                <div class="forum__post__username">Deleted User</div>
-            {% endif %}
+                    <div class="forum__post__joined">
+                        joined <time datetime="{{ post.poster_joined|date('c') }}" title="{{ post.poster_joined|date('r') }}">{{ post.poster_joined|time_diff }}</time>
+                    </div>
+                {% else %}
+                    <div class="forum__post__username">Deleted User</div>
+                {% endif %}
+            </div>
         </div>
 
         <div class="forum__post__content">
diff --git a/templates/master.twig b/templates/master.twig
index 328304fe..39c2e5eb 100644
--- a/templates/master.twig
+++ b/templates/master.twig
@@ -26,21 +26,7 @@
             {% endblock %}
         </div>
 
-        <footer class="footer">
-            {% autoescape false %}
-            <div class="footer__copyright">
-                {{ 'https://flash.moe'|html_link('Flashwave', 'footer__link') }} 2013-{{
-                ''|date('Y') }} /
-                {{ ('https://github.com/flashwave/misuzu/tree/' ~ git_tag())|html_link(git_tag(), 'footer__link') }}
-                # {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__link') }}
-                {% if constant('MSZ_DEBUG') or current_user.user_id|default(0) == 1 %}
-                    / SQL Queries: {{ sql_query_count()|number_format }}
-                    / Took: {{ startup_time()|number_format(5) }} seconds
-                    / Render: {{ startup_time(constant('MSZ_TPL_RENDER'))|number_format(5) }} seconds
-                {% endif %}
-            </div>
-            {% endautoescape %}
-        </footer>
+        {% include '_layout/footer.twig' %}
 
         <script src="{{ '/js/libraries.js'|asset_url }}" charset="utf-8"></script>
         <script>