diff --git a/wagtail_ahl/static/css/wagtail_ahl.css b/wagtail_ahl/static/css/wagtail_ahl.css
index e69de29..cbd8f31 100644
--- a/wagtail_ahl/static/css/wagtail_ahl.css
+++ b/wagtail_ahl/static/css/wagtail_ahl.css
@@ -0,0 +1,287 @@
+@import url('https://fonts.googleapis.com/css?family=Oxygen:400');
+@import url('https://fonts.googleapis.com/css?family=Madimi+One');
+
+:root {
+    --text-50: #efffe5;
+    --text-100: #e0ffcc;
+    --text-200: #c0ff99;
+    --text-300: #a1ff66;
+    --text-400: #81ff33;
+    --text-500: #62ff00;
+    --text-600: #4ecc00;
+    --text-700: #3b9900;
+    --text-800: #276600;
+    --text-900: #143300;
+    --text-950: #0a1a00;
+
+    --background-50: #f2f2f2;
+    --background-100: #e6e6e6;
+    --background-200: #cccccc;
+    --background-300: #b3b3b3;
+    --background-400: #999999;
+    --background-500: #808080;
+    --background-600: #666666;
+    --background-700: #4d4d4d;
+    --background-800: #333333;
+    --background-900: #1a1a1a;
+    --background-950: #0d0d0d;
+
+    --primary-50: #f1faeb;
+    --primary-100: #e3f5d6;
+    --primary-200: #c7eaae;
+    --primary-300: #abe085;
+    --primary-400: #8fd55d;
+    --primary-500: #73cb34;
+    --primary-600: #5ca22a;
+    --primary-700: #457a1f;
+    --primary-800: #2e5115;
+    --primary-900: #17290a;
+    --primary-950: #0b1405;
+
+    --secondary-50: #f5f8ed;
+    --secondary-100: #eaf1da;
+    --secondary-200: #d5e3b5;
+    --secondary-300: #c0d590;
+    --secondary-400: #abc76b;
+    --secondary-500: #96b946;
+    --secondary-600: #789438;
+    --secondary-700: #5a6f2a;
+    --secondary-800: #3c4a1c;
+    --secondary-900: #1e250e;
+    --secondary-950: #0f1207;
+
+    --accent-50: #edf6f8;
+    --accent-100: #dbedf0;
+    --accent-200: #b6dbe2;
+    --accent-300: #92c8d3;
+    --accent-400: #6db6c5;
+    --accent-500: #49a4b6;
+    --accent-600: #3a8392;
+    --accent-700: #2c626d;
+    --accent-800: #1d4249;
+    --accent-900: #0f2124;
+    --accent-950: #071012;
+
+}
+
+
+:root[data-theme="light"] {
+    --text-50: #efffe5;
+    --text-100: #e0ffcc;
+    --text-200: #c0ff99;
+    --text-300: #a1ff66;
+    --text-400: #81ff33;
+    --text-500: #62ff00;
+    --text-600: #4ecc00;
+    --text-700: #3b9900;
+    --text-800: #276600;
+    --text-900: #143300;
+    --text-950: #0a1a00;
+
+    --background-50: #f2f2f2;
+    --background-100: #e6e6e6;
+    --background-200: #cccccc;
+    --background-300: #b3b3b3;
+    --background-400: #999999;
+    --background-500: #808080;
+    --background-600: #666666;
+    --background-700: #4d4d4d;
+    --background-800: #333333;
+    --background-900: #1a1a1a;
+    --background-950: #0d0d0d;
+
+    --primary-50: #f1faeb;
+    --primary-100: #e3f5d6;
+    --primary-200: #c7eaae;
+    --primary-300: #abe085;
+    --primary-400: #8fd55d;
+    --primary-500: #73cb34;
+    --primary-600: #5ca22a;
+    --primary-700: #457a1f;
+    --primary-800: #2e5115;
+    --primary-900: #17290a;
+    --primary-950: #0b1405;
+
+    --secondary-50: #f5f8ed;
+    --secondary-100: #eaf1da;
+    --secondary-200: #d5e3b5;
+    --secondary-300: #c0d590;
+    --secondary-400: #abc76b;
+    --secondary-500: #96b946;
+    --secondary-600: #789438;
+    --secondary-700: #5a6f2a;
+    --secondary-800: #3c4a1c;
+    --secondary-900: #1e250e;
+    --secondary-950: #0f1207;
+
+    --accent-50: #edf6f8;
+    --accent-100: #dbedf0;
+    --accent-200: #b6dbe2;
+    --accent-300: #92c8d3;
+    --accent-400: #6db6c5;
+    --accent-500: #49a4b6;
+    --accent-600: #3a8392;
+    --accent-700: #2c626d;
+    --accent-800: #1d4249;
+    --accent-900: #0f2124;
+    --accent-950: #071012;
+
+}
+
+:root[data-theme="dark"] {
+    --text-50: #0a1a00;
+    --text-100: #143300;
+    --text-200: #296600;
+    --text-300: #3d9900;
+    --text-400: #52cc00;
+    --text-500: #66ff00;
+    --text-600: #85ff33;
+    --text-700: #a3ff66;
+    --text-800: #c2ff99;
+    --text-900: #e0ffcc;
+    --text-950: #f0ffe5;
+
+    --background-50: #0d0d0d;
+    --background-100: #1a1a1a;
+    --background-200: #333333;
+    --background-300: #4d4d4d;
+    --background-400: #666666;
+    --background-500: #808080;
+    --background-600: #999999;
+    --background-700: #b3b3b3;
+    --background-800: #cccccc;
+    --background-900: #e6e6e6;
+    --background-950: #f2f2f2;
+
+    --primary-50: #0b1405;
+    --primary-100: #17290a;
+    --primary-200: #2e5115;
+    --primary-300: #457a1f;
+    --primary-400: #5ca22a;
+    --primary-500: #73cb34;
+    --primary-600: #8fd55d;
+    --primary-700: #abe085;
+    --primary-800: #c7eaae;
+    --primary-900: #e3f5d6;
+    --primary-950: #f1faeb;
+
+    --secondary-50: #0f1207;
+    --secondary-100: #1e250e;
+    --secondary-200: #3c4a1c;
+    --secondary-300: #5a6f2a;
+    --secondary-400: #789438;
+    --secondary-500: #96b946;
+    --secondary-600: #abc76b;
+    --secondary-700: #c0d590;
+    --secondary-800: #d5e3b5;
+    --secondary-900: #eaf1da;
+    --secondary-950: #f5f8ed;
+
+    --accent-50: #071012;
+    --accent-100: #0f2124;
+    --accent-200: #1d4249;
+    --accent-300: #2c626d;
+    --accent-400: #3a8392;
+    --accent-500: #49a4b6;
+    --accent-600: #6db6c5;
+    --accent-700: #92c8d3;
+    --accent-800: #b6dbe2;
+    --accent-900: #dbedf0;
+    --accent-950: #edf6f8;
+
+}
+
+body {
+    font-family: 'Oxygen';
+    font-weight: 400;
+    display: flex;
+    justify-content: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: 'Madimi One';
+    font-weight: 600;
+}
+
+html {
+    font-size: 100%;
+}
+
+/* 16px */
+
+h1 {
+    font-size: 3.053rem;
+    /* 48.8px */
+}
+
+h2 {
+    font-size: 2.442rem;
+    /* 39.04px */
+}
+
+h3 {
+    font-size: 1.954rem;
+    /* 31.2px */
+}
+
+h4 {
+    font-size: 1.563rem;
+    /* 24.96px */
+}
+
+h5 {
+    font-size: 1.250rem;
+    /* 20px */
+}
+
+small {
+    font-size: 0.800rem;
+    /* 12.8px */
+}
+
+.background-image {
+    position: fixed;
+
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    overflow: hidden;
+
+    #background {
+        fill: var(--primary-600);
+    }
+
+    #noise {
+        opacity: 0.2;
+    }
+}
+
+.content {
+    width: 70%;
+    background-color: var(--background-200);
+    padding: 1ex;
+    box-shadow: 10px 10px 9px 1px rgba(0,0,0,0.32);
+    border-radius: 1ex;
+}
+
+/* Mobile only css */
+@media screen and (max-width: 920px) {
+    .desktop {
+        visibility: hidden;
+        display: none;
+    }
+}
+
+/* Desktop only css */
+@media screen and (min-width: 920px) {
+    .mobile {
+        visibility: hidden;
+        display: none;
+    }
+
+}
\ No newline at end of file
diff --git a/wagtail_ahl/templates/base.html b/wagtail_ahl/templates/base.html
index 54300f9..8acc3a7 100644
--- a/wagtail_ahl/templates/base.html
+++ b/wagtail_ahl/templates/base.html
@@ -2,45 +2,65 @@
 
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>
-            {% block title %}
-            {% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}
-            {% endblock %}
-            {% block title_suffix %}
-            {% wagtail_site as current_site %}
-            {% if current_site and current_site.site_name %}- {{ current_site.site_name }}{% endif %}
-            {% endblock %}
-        </title>
-        {% if page.search_description %}
-        <meta name="description" content="{{ page.search_description }}" />
-        {% endif %}
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-        {# Force all links in the live preview panel to be opened in a new tab #}
-        {% if request.in_preview_panel %}
-        <base target="_blank">
-        {% endif %}
-
-        {# Global stylesheets #}
-        <link rel="stylesheet" type="text/css" href="{% static 'css/wagtail_ahl.css' %}">
-
-        {% block extra_css %}
-        {# Override this in templates to add extra stylesheets #}
+<head>
+    <meta charset="utf-8" />
+    <title>
+        {% block title %}
+        {% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}
         {% endblock %}
-    </head>
+        {% block title_suffix %}
+        {% wagtail_site as current_site %}
+        {% if current_site and current_site.site_name %}- {{ current_site.site_name }}{% endif %}
+        {% endblock %}
+    </title>
+    {% if page.search_description %}
+    <meta name="description" content="{{ page.search_description }}" />
+    {% endif %}
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <body class="{% block body_class %}{% endblock %}">
-        {% wagtailuserbar %}
+    {# Force all links in the live preview panel to be opened in a new tab #}
+    {% if request.in_preview_panel %}
+    <base target="_blank">
+    {% endif %}
 
+    {# Global stylesheets #}
+    <link rel="stylesheet" type="text/css" href="{% static 'css/wagtail_ahl.css' %}">
+
+    {% block extra_css %}
+    {# Override this in templates to add extra stylesheets #}
+    {% endblock %}
+</head>
+
+<body class="{% block body_class %}{% endblock %}">
+
+    {% wagtailuserbar %}
+
+
+    <div class="content">
         {% block content %}{% endblock %}
+    </div>
 
-        {# Global javascript #}
-        <script type="text/javascript" src="{% static 'js/wagtail_ahl.js' %}"></script>
+    <svg class="background-image desktop" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img"
+        aria-hidden="true">
+        <defs>
+            <filter id="noiseFilter">
+                <feTurbulence type="turbulence" baseFrequency="5" numOctaves="10" seed="42" result="turb" />
+                <feColorMatrix in="turb" type="saturate" values="0" result="mono" />
+            </filter>
+        </defs>
 
-        {% block extra_js %}
-        {# Override this in templates to add extra javascript #}
-        {% endblock %}
-    </body>
-</html>
+        <rect id="background" x="0" y="0" width="100%" height="100%" />
+        <rect id="noise" x="0" y="0" width="100%" height="100%" filter="url(#noiseFilter)" />
+
+    </svg>
+
+    {# Global javascript #}
+    <script type="text/javascript" src="{% static 'js/wagtail_ahl.js' %}"></script>
+
+    {% block extra_js %}
+    {# Override this in templates to add extra javascript #}
+    {% endblock %}
+</body>
+
+</html>
\ No newline at end of file