diff --git a/docs/css/extra.css b/docs/css/extra.css
index 4ce5518..3b67fa9 100644
--- a/docs/css/extra.css
+++ b/docs/css/extra.css
@@ -1,3 +1,8 @@
+:root {
+  --theme-purple: #5E5184;
+  --link-pink: #9E358F;
+}
+
 h2
 {
   border-bottom:1px solid #CCC;
@@ -102,41 +107,40 @@ body.homepage>div.container div.col-md-9 {
 }
 
 .bg-primary {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#996FC2), color-stop(60%, #6A478D), to(#5E5086)) !important;
-  background-image: linear-gradient(#996FC2, #6A478D 60%, #5E5086) !important;
-  background-repeat: no-repeat !important;
+  background-image: none;
+  background-color: var(--theme-purple) !important;
 }
 
-.btn-primary {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#996FC2), color-stop(60%, #6A478D), to(#5E5086)) !important;
-  background-image: linear-gradient(#996FC2, #6A478D 60%, #5E5086) !important;
-  background-repeat: no-repeat !important;
-
-  color: #fff;
-  background-color: #996FC1;
-  border-color: #996FC1;
-
-  border-bottom: 1px solid #453A62;
+body .bg-primary {
+  background-image: none;
+  background-color: var(--theme-purple);
+  border: 0px;
 }
 
-.navbar {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#996FC2), color-stop(60%, #6A478D), to(#5E5086)) !important;
-  background-image: linear-gradient(#996FC2, #6A478D 60%, #5E5086) !important;
-  background-repeat: no-repeat !important;
+body .btn-primary {
+  background-image: none;
+  background-color: var(--theme-purple);
+  border: 1px solid var(--theme-purple);
+}
 
-  color: #fff;
-  background-color: #996FC1;
-  border-color: #996FC1;
+.navbar.fixed-top {
+  background-image: none;
+  background-color: var(--theme-purple);
+  border-bottom: 5px solid rgba(69, 59, 97, 0.5);
+  padding: 0px;
+}
 
-  border-bottom: 1px solid #453A62;
+.btn-primary:hover {
+  background-color: var(--theme-purple);
+  border: 1px solid var(--theme-purple);
 }
 
 a {
-  color: #996FC2;
+  color: var(--link-pink);
 }
 
 a:hover {
-  color: #674489;
+  color: #996FC2;
 }
 
 .col-md-9 img.main-logo {
@@ -145,17 +149,6 @@ a:hover {
   margin: 0px;
 }
 
-.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
-  color: #fff;
-  background-color: #453A62;
-  border-color: #996FC1;
-}
-
-.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
-  color: #fff;
-  background-color: #453A62;
-}
-
 .ghcup-intro {
   text-align: center;
 }
@@ -310,12 +303,7 @@ ul > li {
 }
 
 #help, #collective {
-  margin-bottom: 0px;
   display: block;
-
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 15px;
   text-align: center;
 }
 
@@ -325,6 +313,12 @@ ul > li {
   height: 24px;
 }
 
+.ghcup-help {
+  margin: 10px auto;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+
 #collective img {
   border: none;
   margin: 0px;
diff --git a/docs/index.md b/docs/index.md
index 6da801e..300d3f3 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -18,7 +18,6 @@ hide:
 <div class="text-center main-buttons">
 <a href="install/" class="btn btn-primary" role="button">Getting Started</a>
 <a href="guide/" class="btn btn-primary" role="button">User Guide</a>
-<a href="https://gitlab.haskell.org/haskell/ghcup-hs/-/issues" class="btn btn-primary" role="button">Issue tracker</a>
 </div>
 
 <section class="qi-container">
@@ -56,22 +55,45 @@ hide:
     </div>
 </section>
 
+<p id="help" class="ghcup-help">
+  Need help? Ask on
+  <span>
+    <a href="https://kiwiirc.com/nextclient/irc.libera.chat/?nick=Guest%7C?#haskell,#haskell-ghcup">
+      <img src="irc.svg" alt="" />
+      IRC
+    </a>
+  </span>,
+  <span>
+    <a href="https://discord.gg/pKYf3zDQU7">
+      <img src="Discord-Logo-Black.svg" alt="" />
+      Discord
+    </a>
+  </span>,
+  <span>
+    <a href="https://app.element.io/#/room/#haskell-tooling:matrix.org">
+      <img src="Matrix_logo.svg" alt=""/>
+    </a>
+  </span>
+   or
+   <span>
+     <a href="https://gitlab.haskell.org/haskell/ghcup-hs/issues">
+       report a bug
+       <img src="Octicons-bug.svg" alt="" />
+     </a>
+   </span>
+</p>
+
+<script type="text/javascript" src="javascripts/ghcup.js"></script>
+
+
+----
+
+
+![GHCup](./ghcup.gif){: .center style="width:700px"}
+
 <section class="index-cta-donate">
   <button class="donate-button">
     <a href="https://opencollective.com/ghcup#category-CONTRIBUTE" class="donate-badge" />
 	</a>
     </button>
 </section>
-
-----
-
-![GHCup](./ghcup.gif){: .center style="width:700px"}
-
-<p id="help">
-Need help? Ask on
-<a href="https://kiwiirc.com/nextclient/irc.libera.chat/?nick=Guest%7C?#haskell,#haskell-ghcup">
-<img src="irc.svg" alt="" />IRC</a>,
-<a href="https://discord.gg/pKYf3zDQU7"><img src="Discord-Logo-Black.svg" alt="" />Discord</a>, <a href="https://app.element.io/#/room/#haskell-tooling:matrix.org"><img src="Matrix_logo.svg" alt=""/></a> or <a href="https://gitlab.haskell.org/haskell/ghcup-hs/issues">report a bug <img src="Octicons-bug.svg" alt="" /></a>
-</p>
-
-<script type="text/javascript" src="javascripts/ghcup.js"></script>
diff --git a/docs/overrides/base.html b/docs/overrides/base.html
new file mode 100644
index 0000000..2bc3adb
--- /dev/null
+++ b/docs/overrides/base.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="{{ config.theme.locale|default('en') }}">
+    <head>
+      {%- block site_meta %}
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        {% if page and page.is_homepage %}<meta name="description" content="{{ config['site_description'] }}">{% endif %}
+        {% if config.site_author %}<meta name="author" content="{{ config.site_author }}">{% endif %}
+        {% if page and page.canonical_url %}<link rel="canonical" href="{{ page.canonical_url }}">{% endif %}
+        {% if config.site_favicon %}<link rel="shortcut icon" href="{{ config.site_favicon|url }}">
+        {% else %}<link rel="shortcut icon" href="{{ 'img/favicon.ico'|url }}">{% endif %}
+      {%- endblock %}
+
+      {%- block htmltitle %}
+        <title>{% if page and page.title and not page.is_homepage %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
+      {%- endblock %}
+
+      {%- block styles %}
+        <link href="{{ 'css/bootstrap.min.css'|url }}" rel="stylesheet">
+        <link href="{{ 'css/font-awesome.min.css'|url }}" rel="stylesheet">
+        <link href="{{ 'css/base.css'|url }}" rel="stylesheet">
+        {%- if config.theme.highlightjs %}
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/{{ config.theme.hljs_style }}.min.css">
+        {%- endif %}
+        {%- for path in extra_css %}
+        <link href="{{ path }}" rel="stylesheet">
+        {%- endfor %}
+      {%- endblock %}
+
+      {%- block libs %}
+
+        <script src="{{ 'js/jquery-1.10.2.min.js'|url }}" defer></script>
+        <script src="{{ 'js/bootstrap.min.js'|url }}" defer></script>
+        {%- if config.theme.highlightjs %}
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
+        {%- for lang in config.theme.hljs_languages %}
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/languages/{{lang}}.min.js"></script>
+        {%- endfor %}
+        <script>hljs.initHighlightingOnLoad();</script>
+        {%- endif %}
+      {%- endblock %}
+
+      {%- block analytics %}
+        {%- if config.theme.analytics.gtag %}
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ config.theme.analytics.gtag }}"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '{{ config.theme.analytics.gtag }}');
+        </script>
+        {%- elif config.google_analytics %}
+        <script>
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+            ga('create', '{{ config.google_analytics[0] }}', '{{ config.google_analytics[1] }}');
+            ga('send', 'pageview');
+        </script>
+        {%- endif %}
+      {%- endblock %}
+
+      {%- block extrahead %} {% endblock %}
+    </head>
+
+    <body{% if page and page.is_homepage %} class="homepage"{% endif %}>
+        <div class="navbar fixed-top navbar-expand-lg navbar-{% if config.theme.nav_style == "light" %}light{% else %}dark{% endif %} bg-{{ config.theme.nav_style }}">
+            <div class="container">
+
+                {%- block site_name %}
+                <a class="navbar-brand" href="{{ nav.homepage.url|url }}">{{ config.site_name }}</a>
+                {%- endblock %}
+
+                {%- if nav|length>1 or (page and (page.next_page or page.previous_page)) or config.repo_url %}
+                <!-- Expander button -->
+                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                {%- endif %}
+
+                <!-- Expanded navigation -->
+                <div id="navbar-collapse" class="navbar-collapse collapse">
+                  {%- block site_nav %}
+                    {%- if nav|length>1 %}
+                        <!-- Main navigation -->
+                        <ul class="nav navbar-nav">
+                        {%- for nav_item in nav %}
+                        {%- if nav_item.children %}
+                            <li class="dropdown{% if nav_item.active %} active{% endif %}">
+                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">{{ nav_item.title }} <b class="caret"></b></a>
+                                <ul class="dropdown-menu">
+                                {%- for nav_item in nav_item.children %}
+                                    {% include "nav-sub.html" %}
+                                {%- endfor %}
+                                </ul>
+                            </li>
+                        {%- else %}
+                            <li class="navitem{% if nav_item.active %} active{% endif %}">
+                                <a href="{{ nav_item.url|url }}" class="nav-link">{{ nav_item.title }}</a>
+                            </li>
+                        {%- endif %}
+                        {%- endfor %}
+                        </ul>
+                    {%- endif %}
+                  {%- endblock %}
+
+                    <ul class="nav navbar-nav ml-auto">
+                      {%- block search_button %}
+                        {%- if 'search' in config['plugins'] %}
+                        <li class="nav-item">
+                            <a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
+                                <i class="fa fa-search"></i> {% trans %}Search{% endtrans %}
+                            </a>
+                        </li>
+                        {%- endif %}
+                      {%- endblock %}
+
+                      {%- block next_prev %}
+                      {%- endblock %}
+
+                      {%- block repo %}
+                        {%- if page and page.edit_url %}
+                            <li class="nav-item">
+                                <a href="{{ page.edit_url }}" class="nav-link">
+                                    {%- if config.repo_name == 'GitHub' -%}
+                                        <i class="fa fa-github"></i> {% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}
+                                    {%- elif config.repo_name == 'Bitbucket' -%}
+                                        <i class="fa fa-bitbucket"></i> {% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}
+                                    {%- elif config.repo_name == 'GitLab' -%}
+                                        <i class="fa fa-gitlab"></i> {% trans repo_name=config.repo_name %}Edit on {{ repo_name }}{% endtrans %}
+                                    {%- else -%}
+                                    {% trans repo_name=config.repo_name%}Edit on {{ repo_name }}{% endtrans %}
+                                    {%- endif -%}
+                                </a>
+                            </li>
+                        {%- elif config.repo_url %}
+                            <li class="nav-item">
+                                <a href="{{ config.repo_url }}" class="nav-link">
+                                    {%- if config.repo_name == 'GitHub' -%}
+                                        <i class="fa fa-github"></i> {{ config.repo_name }}
+                                    {%- elif config.repo_name == 'Bitbucket' -%}
+                                        <i class="fa fa-bitbucket"></i> {{ config.repo_name }}
+                                    {%- elif config.repo_name == 'GitLab' -%}
+                                        <i class="fa fa-gitlab"></i> {{ config.repo_name }}
+                                    {%- else -%}
+                                    {{ config.repo_name }}
+                                    {%- endif -%}
+                                </a>
+                            </li>
+                        {%- endif %}
+                      {%- endblock %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="container">
+            <div class="row">
+                {%- block content %}
+                    <div class="col-md-3">{% include "toc.html" %}</div>
+                    <div class="col-md-9" role="main">{% include "content.html" %}</div>
+                {%- endblock %}
+            </div>
+        </div>
+
+        <footer class="col-md-12">
+          {%- block footer %}
+            <hr>
+            {%- if config.copyright %}
+                <p>{{ config.copyright }}</p>
+            {%- endif %}
+            <p>{% trans mkdocs_link='<a href="https://www.mkdocs.org/">MkDocs</a>' %}Documentation built with {{ mkdocs_link }}.{% endtrans %}</p>
+          {%- endblock %}
+        </footer>
+
+      {%- block scripts %}
+        <script>
+            var base_url = {{ base_url | tojson }},
+                shortcuts = {{ config.theme.shortcuts | tojson }};
+        </script>
+        <script src="{{ 'js/base.js'|url }}" defer></script>
+        {%- for path in extra_javascript %}
+        <script src="{{ path }}" defer></script>
+        {%- endfor %}
+      {%- endblock %}
+
+        {% if 'search' in config['plugins'] %}{%- include "search-modal.html" %}{% endif %}
+        {%- include "keyboard-modal.html" %}
+
+    </body>
+</html>
+{% if page and page.is_homepage %}
+<!--
+MkDocs version : {{ mkdocs_version }}
+Build Date UTC : {{ build_date_utc }}
+-->
+{% endif %}
diff --git a/mkdocs.yml b/mkdocs.yml
index 256dc2f..f78abf7 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -9,6 +9,7 @@ repo_url: https://gitlab.haskell.org/haskell/ghcup-hs
 theme:
     name: mkdocs
     locale: en
+    custom_dir: docs/overrides
 
 nav:
   - Home: index.md