diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
index 56319e3..8d2293a 100644
--- a/.github/workflows/deployment.yml
+++ b/.github/workflows/deployment.yml
@@ -36,7 +36,7 @@ jobs:
 
       - run: nix build .#docs
 
-      - run: mkdir -p out && cp ./result/* out
+      - run: mkdir -p out && cp -r ./result/* out
 
       - name: Store docs
         uses: ./.github/actions/upload-artifact
diff --git a/README.md b/README.md
index 1c1b9a0..9c69048 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Nixarr
 
-![Logo](./docs/img/logo-1.webp)
+![Logo](./docs/img/logo-2.png)
 
 This is a nixos module that aims to make the installation and management of
 running the "*Arrs" as easy, and pain free, as possible.
@@ -14,7 +14,7 @@ subject to change.
 ## Options
 
 The documentation for the options can be found
-[here](https://nixarr.rasmuskirk.com/)
+[here](https://nixarr.rasmuskirk.com/options)
 
 ## Features
 
@@ -30,7 +30,7 @@ The documentation for the options can be found
 
 To run services through a VPN, you must provide a wg-quick config file:
 
-```nix
+```nix {.numberLines}
 nixarr.vpn = {
   enable = true;
   # IMPORTANT: This file must _not_ be in the config git directory
@@ -43,7 +43,7 @@ nixarr.vpn = {
 
 Full example can be seen below:
 
-```nix
+```nix {.numberLines}
 nixarr = {
   enable = true;
   # These two values are also the default, but you can set them to whatever
@@ -88,7 +88,7 @@ nixarr = {
 Another example where port forwarding is not an option. This could be for
 example if you're living in a dorm:
 
-```nix
+```nix{.numberLines}
 nixarr = {
   enable = true;
 
diff --git a/docs/img/logo-2-cropped.webp b/docs/img/logo-2-cropped.webp
new file mode 100644
index 0000000..06a5d5a
Binary files /dev/null and b/docs/img/logo-2-cropped.webp differ
diff --git a/docs/img/logo-2.png b/docs/img/logo-2.png
new file mode 100644
index 0000000..a8cb119
Binary files /dev/null and b/docs/img/logo-2.png differ
diff --git a/docs/img/logo-2.webp b/docs/img/logo-2.webp
new file mode 100644
index 0000000..f7ce058
Binary files /dev/null and b/docs/img/logo-2.webp differ
diff --git a/docs/styling/gruvbox.theme b/docs/pandoc/gruvbox.theme
similarity index 100%
rename from docs/styling/gruvbox.theme
rename to docs/pandoc/gruvbox.theme
diff --git a/docs/styling/style.css b/docs/pandoc/style.css
similarity index 81%
rename from docs/styling/style.css
rename to docs/pandoc/style.css
index b2591f5..ed41769 100644
--- a/docs/styling/style.css
+++ b/docs/pandoc/style.css
@@ -26,8 +26,8 @@
 }
 
 html {
-  font-size: 100%;
-  overflow-y: scroll;
+  /* font-size: 100%; */
+  /* overflow-y: scroll; */
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
 }
@@ -35,12 +35,78 @@ html {
 body {
   color: var(--fg0);
   font-family: century_supra_a, Georgia, serif;
-  font-size: 12px;
+  font-size: 16px;
   line-height: 1.7;
-  padding: 1em;
-  margin: auto;
-  max-width: 38em;
   background: var(--bge);
+  margin: 0;
+}
+
+main {
+  min-height: 100vh;
+  position: relative;
+}
+
+#header {
+  background-color: #066678;
+  padding: 0.3rem 0;
+  color: #faf8e4;
+  border-bottom: 1px solid #458587;
+  font-size: 2rem;
+}
+
+nav {
+  color: #faf8e4;
+  background-color: #054c5a;
+}
+
+nav .content {
+  display: flex;
+  padding: 0;
+}
+
+nav a {
+  color: #458587;
+  text-decoration: none;
+  font-size: 1em;
+  padding: 0.15em 1em;
+}
+
+nav a.active {
+  background-color: #458587;
+  color: #faf8e4 !important;
+}
+
+nav a:visited {
+  color: #458587;
+}
+
+footer {
+  height: 2rem;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: #03333b;
+  border-top: 0.5rem solid #458587;
+  color: #faf8e4;
+  display: flex;
+  font-size: 0.8rem;
+}
+
+footer .content {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  height: 100%;
+}
+
+.content {
+  margin: auto;
+  padding: 0 0.5rem;
+  max-width: 50rem;
+}
+
+.content-wrap {
+  padding-bottom: 2.5rem;
 }
 
 a {
@@ -96,7 +162,7 @@ img {
 h1, h2, h3, h4, h5, h6 {
   color: var(--fg0);
   line-height: 125%;
-  margin-top: 1em;
+  /* margin-top: 1em; */
   font-weight: normal;
 }
 
@@ -105,7 +171,7 @@ h4, h5, h6 {
 }
 
 h1 {
-  font-size: 2.5em;
+  font-size: 2.25em;
 }
 
 h2 {
@@ -274,16 +340,6 @@ table td {
   text-align: center;
 }
 
-@media only screen and (min-width: 480px) {
-  body {
-    font-size: 14px;
-  }
-}
-@media only screen and (min-width: 768px) {
-  body {
-    font-size: 16px;
-  }
-}
 @media print {
   * {
     background: transparent !important;
@@ -294,9 +350,13 @@ table td {
 
   body {
     font-size: 12pt;
+  }
+  
+  .content {
     max-width: 100%;
   }
 
+
   a, a:visited {
     text-decoration: underline;
   }
@@ -349,4 +409,4 @@ table td {
   h2, h3 {
     page-break-after: avoid;
   }
-}
+}
diff --git a/docs/pandoc/template.html b/docs/pandoc/template.html
new file mode 100644
index 0000000..d5e1e2b
--- /dev/null
+++ b/docs/pandoc/template.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$" $if(dir)$ dir="$dir$" $endif$>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="generator" content="pandoc" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    $for(author-meta)$
+    <meta name="author" content="$author-meta$" />
+    $endfor$
+    $if(date-meta)$
+    <meta name="dcterms.date" content="$date-meta$" />
+    $endif$
+    $if(keywords)$
+    <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
+    $endif$
+    $if(description-meta)$
+    <meta name="description" content="$description-meta$" />
+    $endif$
+    <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+    <style>
+        $styles.html()$
+    </style>
+    $for(css)$
+    <link rel="stylesheet" href="$css$" />
+    $endfor$
+    $for(header-includes)$
+    $header-includes$
+    $endfor$
+    $if(math)$
+    $if(mathjax)$
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    $endif$
+    $math$
+    $endif$
+    <!--[if lt IE 9]>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
+    <![endif]-->
+    <script>
+        addEventListener('DOMContentLoaded', () => {
+            const fullpath = location.origin + location.pathname
+
+            document.querySelectorAll('nav a').forEach((el) => {
+                const url = new URL(el.href)
+                if (url.origin + url.pathname === fullpath) {
+                    el.classList.add('active')
+                }
+            })
+        })
+    </script>
+</head>
+
+<body>
+    <main>
+        <header id="header">
+            <div class="content">
+                Nixarr
+            </div>
+        </header>
+        <nav>
+            <div class="content">
+                <a href="/">Home</a>
+                <a href="/options.html">Options</a>
+                <a href="https://github.com/rasmus-kirk/nixarr">Github</a>
+            </div>
+        </nav>
+        <div class="content content-wrap">
+            $for(include-before)$
+            $include-before$
+            $endfor$
+            $if(title)$
+            <header id="title-block-header">
+                <h1 class="title">$title$</h1>
+                $if(subtitle)$
+                <p class="subtitle">$subtitle$</p>
+                $endif$
+                $for(author)$
+                <p class="author">$author$</p>
+                $endfor$
+                $if(abstract)$
+                <div class="abstract">
+                    <div class="abstract-title">$abstract-title$</div>
+                    $abstract$
+                </div>
+                $endif$
+            </header>
+            $endif$
+            $if(toc)$
+            <nav id="$idprefix$TOC" role="doc-toc">
+                $if(toc-title)$
+                <h2 id="$idprefix$toc-title">$toc-title$</h2>
+                $endif$
+                $table-of-contents$
+            </nav>
+            $endif$
+            $body$
+            $for(include-after)$
+            $include-after$
+            $endfor$
+        </div>
+        <footer>
+            <div class="content">
+                <div>
+                    Rasmus Kirk Jakobsen
+                </div>
+                $if(date)$
+                    <div>$date$</div>
+                $endif$
+            </div>
+        </footer>
+    </main>
+</body>
+
+</html>
diff --git a/mkDocs.nix b/mkDocs.nix
index 8534003..3ccc5cf 100644
--- a/mkDocs.nix
+++ b/mkDocs.nix
@@ -1,7 +1,6 @@
 {
   lib,
   pkgs,
-  runCommand,
   nixosOptionsDoc,
   ...
 }: let
@@ -26,7 +25,7 @@ in pkgs.stdenv.mkDerivation {
     buildPhase = ''
       tmpdir=$(mktemp -d)
       mkdir -p $out
-      cp docs/styling/style.css $out
+      cp -r docs/pandoc/style.css docs $out
 
       # Generate md docs
       cat ${optionsDocNixos.optionsCommonMark} | tail -n +58 >> "$tmpdir"/nixos.md
@@ -57,14 +56,30 @@ in pkgs.stdenv.mkDerivation {
 
       pandoc \
         --standalone \
-        --highlight-style docs/styling/gruvbox.theme \
+        --highlight-style docs/pandoc/gruvbox.theme \
         --metadata title="Nixarr - Option Documentation" \
+        --template docs/pandoc/template.html \
         --metadata date="$(date -u '+%Y-%m-%d - %H:%M:%S %Z')" \
-        --css=style.css \
+        --css style.css \
+        -V lang=en \
+        -V --mathjax \
+        -f markdown+smart \
+        -o $out/options.html \
+        "$tmpdir"/done.md
+
+      tail -n +2 README.md > "$tmpdir/index.md"
+
+      pandoc \
+        --standalone \
+        --highlight-style docs/pandoc/gruvbox.theme \
+        --template docs/pandoc/template.html \
+        --metadata date="$(date -u '+%Y-%m-%d - %H:%M:%S %Z')" \
+        --metadata title="Nixarr" \
+        --css style.css \
         -V lang=en \
         -V --mathjax \
         -f markdown+smart \
         -o $out/index.html \
-        "$tmpdir"/done.md
+        "$tmpdir/index.md"
     '';
   }