diff --git a/web/layouts/partials/header.html b/web/layouts/partials/header.html
index e316cf4086432e1cdbe3e051d1bdce48cb6a9cb7..a37eb06f09c19d7aca85c1ca9187e9891d797be8 100644
--- a/web/layouts/partials/header.html
+++ b/web/layouts/partials/header.html
@@ -34,7 +34,7 @@
         {{ $currentPage := . }}
         <div class="w-1/2 flex justify-center">
           {{ range .Site.Menus.main }}
-          <a href="{{ .URL }}" {{if $currentPage.IsMenuCurrent "main" . }}class="active"{{end}} class="mr-8">{{ .Name }}</a>
+          <a href="{{ .URL }}" class="mr-8{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}">{{ .Name }}</a>
           {{ end }}
         </div>
         <div class="w-1/4 text-right">
diff --git a/web/layouts/section/docs.html b/web/layouts/section/docs.html
index eaf5154e3886e926806ddfba87c976de4bd24e9d..a0c3bff7704d30b53bc1024c1dd2e36b49a182bd 100644
--- a/web/layouts/section/docs.html
+++ b/web/layouts/section/docs.html
@@ -1,16 +1,13 @@
 {{ define "main" }}
-
-  <div class="col-xs-12">
     <h1>OpenGeoSys Documentation</h1>
     {{ .Content }}
-    <div class="row">
       <div class="flex flex-wrap">
       {{ range .Params.sections }}
-        <div class="w-third pa2 mv3">
-          <div class="pa2 ba br3 b--black-10">
+        <div class="w-1/3 p-2 my-3">
+          <div class="p-2">
             <div class="tc">
-              <h1 class="f4"><a href="/docs/{{ .slug }}">{{ .name }}</a></h1>
-              <hr class="mw3 bb bw1 b--black-10">
+              <h2 class="text-center"><a href="/docs/{{ .slug }}">{{ .name }}</a></h1>
+              <hr>
             </div>
             <p class="1h-copy measure center f6 black-70">{{ .text }}</p>
           </div>
@@ -18,7 +15,5 @@
 
       {{ end }}
       </div>
-    </div>
-  </div>
 
 {{ end }}
diff --git a/web/src/scss/main.scss b/web/src/scss/main.scss
deleted file mode 100644
index 35ecec4cf20a214ba7392ef77766f08f77fbdb8d..0000000000000000000000000000000000000000
--- a/web/src/scss/main.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-$header-font-family: athelas;
-$text-font-family: avenir;
-$code-font-family: code;
-
-@import 'tachyons-sass/tachyons';
-
-// Fonts
-h1, h2, h3, h4, h5, h6 { @extend .#{$header-font-family}; }
-body, p { @extend .#{$text-font-family}; }
-code, pre { @extend .#{$code-font-family}; }
-
-// Header
-h1 { @extend .f2; }
-h2 { @extend .f3; }
-h3 { @extend .f4; }
-
-// Text
-a {
-  @extend .link;
-  @extend .hover-orange;
-}
-
-p, li {
-  @extend .lh-copy;
-  @extend .f5;
-}
-
-// Code
-code, pre {
-  @extend .lh-solid;
-  @extend .f6;
-}
-
-pre {
-  @extend .bg-near-white;
-  @extend .pa2;
-}
-
-// Nav
-.nav-a-style {
-    @extend .gray;
-    @extend .dim;
-    @extend .dib;
-}
-nav {
-    @extend .pa3;
-    @extend .pa4-ns;
-
-    a {
-        @extend .nav-a-style;
-        @extend .f6;
-        @extend .f5-ns;
-        @extend .mr3;
-
-
-    }
-    a.active {
-        @extend .orange;
-    }
-}
-
-// Image
-img {
-    @extend .mw-100;
-}
-
-// Docs
-
-// OS selector
-#btn-win, #btn-linux, #btn-mac {
-    @extend .f6;
-    @extend .link;
-    @extend .dim;
-    @extend .ba;
-    @extend .bw1;
-    @extend .ph3;
-    @extend .pv1;
-    @extend .mb2;
-    @extend .dib;
-    @extend .black;
-}
-
-#btn-win.active, #btn-linux.active, #btn-mac.active {
-    @extend .orange;
-}
-
-.note {
-    @extend .pv1;
-    @extend .ph4;
-    @extend .bg-washed-yellow;
-
-    h1, h2, h3, h4 {
-        @extend .orange;
-    }
-}
-
-// Side nav
-ul.sidenav {
-    @extend .list;
-    @extend .pl0;
-    li {
-        @extend .f5;
-    }
-    li.category {
-        @extend .#{$header-font-family};
-        @extend .small-caps;
-        @extend .f4;
-        @extend .mt2;
-    }
-    a {
-        @extend .nav-a-style;
-        @extend .f6;
-    }
-    a.active, a:hover {
-        @extend .orange;
-    }
-}
-
-// Footer nav-a-style
-.footer-nav {
-    a {
-        @extend .f6;
-    }
-}
-
-.page-info {
-    p {
-        @extend .f6;
-        @extend .gray;
-
-        a {
-            @extend .light-blue;
-        }
-        a:hover {
-            @extend .light-red;
-        }
-    }
-}
-
-// Vis
-.vis {
-    figcaption {
-        @extend .f6;
-    }
-}
diff --git a/web/src/styles.css b/web/src/styles.css
index 6b860b58845000ce60ea1e4a1f6f60878887aa2d..2cb383758df2e474f2d3be4dbb865a3ed75b675b 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -26,6 +26,10 @@ p, ul, pre {
   @apply .mb-4;
 }
 
+hr {
+  @apply .border;
+}
+
 /* ------------------------------- Components ------------------------------- */
 .btn {
   @apply .px-2;
@@ -50,3 +54,5 @@ p, ul, pre {
 }
 
 @tailwind utilities;
+
+@import 'css/pandoc-highlighting.css'