diff --git a/.gitignore b/.gitignore
index d10e5de..0ac9c1a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@
 /.sass-cache/
 /build/
 *.scssc
+/Book.html
diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart
index bda7124..e3e2720 100644
--- a/web/dart/navbar.dart
+++ b/web/dart/navbar.dart
@@ -114,7 +114,9 @@ Future<Element> makeThemeChanger() async {
   Element makeThemeItem(String t_btnId) {
     return Element.li()
       ..classes.add('dropdown-item')
-      ..append(Element.span()..attributes['id'] = t_btnId);
+      ..append(Element.span()
+        ..attributes['id'] = t_btnId
+        ..classes.add('themeBtn'));
   }
 
   return Element.li()
@@ -131,6 +133,7 @@ Future<Element> makeThemeChanger() async {
       ..attributes['id'] = 'theme-dropdown'
       ..append(makeThemeItem('lightBtn'))
       ..append(makeThemeItem('darkBtn'))
+      ..append(makeThemeItem('nordBtn'))
       ..append(makeThemeItem('blackBtn')));
 }
 
diff --git a/web/dart/theme.dart b/web/dart/theme.dart
index ec6c7e3..0d2f6ea 100644
--- a/web/dart/theme.dart
+++ b/web/dart/theme.dart
@@ -1,4 +1,4 @@
-import 'dart:html';
+import 'dart:html' show window, querySelector;
 
 final localStorage = window.localStorage;
 
@@ -7,7 +7,7 @@ Future<void> setTheme([String theme]) async {
   () {
     final devicePrefersDark =
     window.matchMedia('(prefers-color-scheme: dark)').matches;
-    return devicePrefersDark ? 'dark' : 'light';
+    return devicePrefersDark ? 'nord' : 'light';
   }();
   localStorage['theme'] = currentTheme;
   querySelector('body')
@@ -16,7 +16,7 @@ Future<void> setTheme([String theme]) async {
 }
 
 void enableThemeChanger() {
-  final themes = <String>['light', 'dark', 'black'];
+  final themes = <String>['light', 'dark', 'nord', 'black'];
   themes.forEach((theme) =>
     querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme))
   );
diff --git a/web/style/main.scss b/web/style/main.scss
new file mode 100644
index 0000000..024cd20
--- /dev/null
+++ b/web/style/main.scss
@@ -0,0 +1,2 @@
+@import "themes.scss";
+@import "style.scss";
diff --git a/web/style/style.scss b/web/style/style.scss
index d16c6fa..a7910e3 100644
--- a/web/style/style.scss
+++ b/web/style/style.scss
@@ -1,4 +1,4 @@
-/* Variables *****************************************************************/
+// Variables //////////////////////////////////////////////////////////////////
 
 $switch-small-screen: "only screen and (max-width: 600px)";
 $switch-smaller-screen: "only screen and (max-width: 400px)";
@@ -6,262 +6,7 @@ $switch-smaller-screen: "only screen and (max-width: 400px)";
 $navbar-height: 70px;
 $postamble-height: 55px;
 
-$tooltip-underline-size: 3px;
-
-// Themes /////////////////////////////////////////////////////////////////////
-
-$dark:                         rgba( 52,  73,  94, 1);
-$black:                        rgba(  0,   0,   0, 1);
-$accent1:                      rgba( 93, 115, 126, 1);
-$accent2:                      rgba( 92, 172, 126, 1);
-$accent3:                      rgba(197, 193, 155, 1);
-$light:                        #eee;
-$grey1:                        #f8f8f8;
-$grey2:                        #dbe1e8;
-$grey3:                        #b2becd;
-$grey4:                        #6c7983;
-$grey5:                        #454e56;
-$grey6:                        #12181b;
-
-// Accent 1
-//   Black
-$gradient-accent1-black-left:  linear-gradient(to left,  $black,  $accent1,  $accent1);
-$gradient-accent1-black-right: linear-gradient(to right, $black,  $accent1,  $accent1);
-//   Dark
-$gradient-accent1-dark-left:   linear-gradient(to left,  $dark,   $accent1);
-$gradient-accent1-dark-right:  linear-gradient(to right, $dark,   $accent1);
-//   Light
-$gradient-accent1-light-left:  linear-gradient(to left,  $light,  $accent1);
-$gradient-accent1-light-right: linear-gradient(to right, $light,  $accent1);
-// Accent 2
-//   Black
-$gradient-accent2-black-left:  linear-gradient(to left,  $black,  $accent2,  $accent2);
-$gradient-accent2-black-right: linear-gradient(to right, $black,  $accent2,  $accent2);
-//   Dark
-$gradient-accent2-dark-left:   linear-gradient(to left,  $dark,   $accent2);
-$gradient-accent2-dark-right:  linear-gradient(to right, $dark,   $accent2);
-//   Light
-$gradient-accent2-light-left:  linear-gradient(to left,  $light,  $accent2);
-$gradient-accent2-light-right: linear-gradient(to right, $light,  $accent2);
-// Accent 3
-//   Black
-$gradient-accent3-black-left:  linear-gradient(to left,  $black,  $accent3,  $accent3);
-$gradient-accent3-black-right: linear-gradient(to right, $black,  $accent3,  $accent3);
-//   Dark
-$gradient-accent3-dark-left:   linear-gradient(to left,  $dark,   $accent3);
-$gradient-accent3-dark-right:  linear-gradient(to right, $dark,   $accent3);
-//   Light
-$gradient-accent3-light-left:  linear-gradient(to left,  $light,  $accent3);
-$gradient-accent3-light-right: linear-gradient(to right, $light,  $accent3);
-
-.light {
-    $bg-nav: $gradient-accent3-light-right;
-    $border-color: $accent1;
-
-    color: $dark;
-    background: $light;
-
-    transition: background 500ms ease-in-out, color 1s ease-in-out;
-
-    pre {
-        box-shadow: 3px 5px $dark;
-        border-color: $light;
-    }
-
-    pre.src {
-        &::before {
-            background-color: $light;
-            color: $dark;
-        }
-    }
-
-    .navbar, header {
-        background: $bg-nav;
-    }
-
-    .navbar svg {
-        fill: $dark;
-    }
-
-    .status {
-        background: $gradient-accent3-light-left;
-        color: $dark;
-    }
-
-    .tooltip {
-        border-bottom: $tooltip-underline-size dotted $accent3;
-
-        .tooltiptext {
-            background-color: $accent3;
-            color: $dark;
-
-            &::after {
-                border-color: $accent3 transparent transparent transparent;
-            }
-        }
-    }
-
-    .dropdown {
-        background: $accent3;
-        color: $dark;
-    }
-
-    #content {
-        a {
-            box-shadow: inset 0 -3px 0 $accent3;
-            transition: box-shadow 300ms ease-in-out;
-
-            &:hover {
-                box-shadow: inset 0 -23px 0 $accent3;
-                transition: box-shadow 300ms ease-in-out;
-            }
-        }
-    }
-
-    table, th, td {
-        border: 1px solid $dark;
-    }
-
-    th {
-        background: darken($light, 5%);
-    }
-
-    .gentree {
-        filter: invert(0%);
-        transition: filter 1s ease-in-out;
-    }
-}
-
-.dark, .black {
-    $bg-nav: $gradient-accent2-dark-right;
-    $border-color: $dark;
-
-    color: $light;
-    background: $dark;
-
-    transition: background 500ms ease-in-out, color 1s ease-in-out;
-
-    pre {
-        box-shadow: 3px 3px $dark;
-        border: none;
-    }
-
-    pre.src {
-        &::before {
-            background-color: $dark;
-            color: $light;
-        }
-    }
-
-    .navbar, header {
-        background: $bg-nav;
-    }
-
-    .navbar svg {
-        fill: $light;
-    }
-
-    .status {
-        background: $gradient-accent2-dark-left;
-        color: $light;
-    }
-
-    .tooltip {
-        border-bottom: $tooltip-underline-size dotted $accent1;
-
-        .tooltiptext {
-            background-color: $accent1;
-            color: $light;
-
-            &::after {
-                border-color: $accent1 transparent transparent transparent;
-            }
-        }
-    }
-
-    .dropdown {
-        background: $dark;
-        color: $light;
-    }
-
-    #content {
-        a {
-            box-shadow: inset 0 -3px 0 $accent2;
-            transition: box-shadow 300ms ease-in-out;
-
-            &:hover {
-                box-shadow: inset 0 -23px 0 $accent2;
-                transition: box-shadow 300ms ease-in-out;
-            }
-        }
-    }
-
-    table, th, td {
-        border: 1px solid $accent1;
-    }
-
-    th {
-        background: darken($dark, 2.5%);
-    }
-
-    .gentree {
-        filter: invert(100%);
-        transition: filter 1s ease-in-out;
-    }
-}
-
-.black {
-    $bg-nav: $gradient-accent1-black-right;
-
-    background: $black;
-
-    pre {
-        box-shadow: 3px 3px $light;
-        border: none;
-    }
-
-    pre.src {
-        &::before {
-            background-color: $black;
-            color: $light;
-        }
-    }
-
-    .navbar, header {
-        background: $bg-nav;
-    }
-
-    .status {
-        background: $gradient-accent1-black-left;
-    }
-
-    .dropdown {
-        background: $dark;
-        color: $light;
-    }
-
-    #content {
-        a {
-            box-shadow: inset 0 -3px 0 $accent1;
-            transition: box-shadow 300ms ease-in-out;
-
-            &:hover {
-                box-shadow: inset 0 -23px 0 $accent1;
-                transition: box-shadow 300ms ease-in-out;
-            }
-        }
-    }
-
-    table, th, td {
-        border: 1px solid $light;
-    }
-
-    th {
-        background: lighten($black, 15%);
-    }
-}
-
-/* Style *********************************************************************/
+// Style //////////////////////////////////////////////////////////////////////
 
 * {
     outline: none;
@@ -343,7 +88,6 @@ header {
     align-items: center;
     justify-content: space-around;
     min-height: 3rem;
-    margin-top: 1rem;
     padding: 0.5rem;
     top: 0;
 
@@ -363,7 +107,7 @@ header {
         }
 
         #table-of-contents, #drop-page {
-            top: $navbar-height / 1.3;
+            top: $navbar-height;
             opacity: 1;
             z-index: 5;
             height: 80vh;
@@ -373,12 +117,12 @@ header {
 }
 
 #theme-dropdown {
-    width: 150px;
+    width: 250px;
     flex-direction: row;
     transform: translateX(-75%);
 }
 
-#lightBtn, #darkBtn, #blackBtn {
+.themeBtn {
     content: ' ';
     border: 2px solid white;
     border-radius: 50%;
@@ -389,18 +133,6 @@ header {
     margin-right: 10px;
 }
 
-#lightBtn {
-    background: $light;
-}
-
-#darkBtn {
-    background: $dark;
-}
-
-#blackBtn {
-    background: $black;
-}
-
 #drop-page, #table-of-contents {
     flex-direction: column;
 
@@ -616,7 +348,5 @@ ul {
 }
 
 pre.src {
-    background: $dark;
-    color: $light;
     overflow-y: auto;
 }
diff --git a/web/style/themes.scss b/web/style/themes.scss
new file mode 100644
index 0000000..1c2bf31
--- /dev/null
+++ b/web/style/themes.scss
@@ -0,0 +1,373 @@
+// Variables //////////////////////////////////////////////////////////////////
+
+$tooltip-underline-size: 3px;
+
+// Themes /////////////////////////////////////////////////////////////////////
+
+$dark:                         rgba( 52,  73,  94, 1);
+$nord:                         rgba( 46,  52,  64, 1);
+$black:                        rgba(  0,   0,   0, 1);
+$accent1:                      rgba( 93, 115, 126, 1);
+$accent2:                      rgba( 92, 172, 126, 1);
+$accent3:                      rgba(197, 193, 155, 1);
+$light:                        #eee;
+$grey1:                        #f8f8f8;
+$grey2:                        #dbe1e8;
+$grey3:                        #b2becd;
+$grey4:                        #6c7983;
+$grey5:                        #454e56;
+$grey6:                        #12181b;
+
+// Accent 1
+//   Black
+$gradient-accent1-black-left:  linear-gradient(to left,  $black,  $accent1,  $accent1);
+$gradient-accent1-black-right: linear-gradient(to right, $black,  $accent1,  $accent1);
+//   Dark
+$gradient-accent1-dark-left:   linear-gradient(to left,  $dark,   $accent1);
+$gradient-accent1-dark-right:  linear-gradient(to right, $dark,   $accent1);
+//   Light
+$gradient-accent1-light-left:  linear-gradient(to left,  $light,  $accent1);
+$gradient-accent1-light-right: linear-gradient(to right, $light,  $accent1);
+// Accent 2
+//   Black
+$gradient-accent2-black-left:  linear-gradient(to left,  $black,  $accent2,  $accent2);
+$gradient-accent2-black-right: linear-gradient(to right, $black,  $accent2,  $accent2);
+//   Dark
+$gradient-accent2-dark-left:   linear-gradient(to left,  $dark,   $accent2);
+$gradient-accent2-dark-right:  linear-gradient(to right, $dark,   $accent2);
+//   Light
+$gradient-accent2-light-left:  linear-gradient(to left,  $light,  $accent2);
+$gradient-accent2-light-right: linear-gradient(to right, $light,  $accent2);
+// Accent 3
+//   Black
+$gradient-accent3-black-left:  linear-gradient(to left,  $black,  $accent3,  $accent3);
+$gradient-accent3-black-right: linear-gradient(to right, $black,  $accent3,  $accent3);
+//   Dark
+$gradient-accent3-dark-left:   linear-gradient(to left,  $dark,   $accent3);
+$gradient-accent3-dark-right:  linear-gradient(to right, $dark,   $accent3);
+//   Light
+$gradient-accent3-light-left:  linear-gradient(to left,  $light,  $accent3);
+$gradient-accent3-light-right: linear-gradient(to right, $light,  $accent3);
+
+.light {
+    $bg-nav: $gradient-accent3-light-right;
+    $border-color: $accent1;
+
+    color: $dark;
+    background: $light;
+
+    transition: background 500ms ease-in-out, color 1s ease-in-out;
+
+    pre {
+        box-shadow: 3px 5px $dark;
+        border-color: $light;
+    }
+
+    pre.src {
+        &::before {
+            background-color: $light;
+            color: $dark;
+        }
+    }
+
+    .navbar, header {
+        background: $bg-nav;
+    }
+
+    .navbar svg {
+        fill: $dark;
+    }
+
+    .status {
+        background: $gradient-accent3-light-left;
+        color: $dark;
+    }
+
+    .tooltip {
+        border-bottom: $tooltip-underline-size dotted $accent3;
+
+        .tooltiptext {
+            background-color: $accent3;
+            color: $dark;
+
+            &::after {
+                border-color: $accent3 transparent transparent transparent;
+            }
+        }
+    }
+
+    .dropdown {
+        background: $accent3;
+        color: $dark;
+    }
+
+    #content {
+        a {
+            box-shadow: inset 0 -3px 0 $accent3;
+            transition: box-shadow 300ms ease-in-out;
+
+            &:hover {
+                box-shadow: inset 0 -23px 0 $accent3;
+                transition: box-shadow 300ms ease-in-out;
+            }
+        }
+    }
+
+    table, th, td {
+        border: 1px solid $dark;
+    }
+
+    th {
+        background: darken($light, 5%);
+    }
+
+    .gentree {
+        filter: invert(0%);
+        transition: filter 1s ease-in-out;
+    }
+}
+
+.dark, .black {
+    $bg-nav: $gradient-accent2-dark-right;
+    $border-color: $dark;
+
+    color: $light;
+    background: $dark;
+
+    transition: background 500ms ease-in-out, color 1s ease-in-out;
+
+    pre {
+        box-shadow: 3px 3px $dark;
+        border: none;
+    }
+
+    pre.src {
+        &::before {
+            background-color: $dark;
+            color: $light;
+        }
+    }
+
+    .navbar, header {
+        background: $bg-nav;
+    }
+
+    .navbar svg {
+        fill: $light;
+    }
+
+    .status {
+        background: $gradient-accent2-dark-left;
+        color: $light;
+    }
+
+    .tooltip {
+        border-bottom: $tooltip-underline-size dotted $accent1;
+
+        .tooltiptext {
+            background-color: $accent1;
+            color: $light;
+
+            &::after {
+                border-color: $accent1 transparent transparent transparent;
+            }
+        }
+    }
+
+    .dropdown {
+        background: $dark;
+        color: $light;
+    }
+
+    #content {
+        a {
+            box-shadow: inset 0 -3px 0 $accent2;
+            transition: box-shadow 300ms ease-in-out;
+
+            &:hover {
+                box-shadow: inset 0 -23px 0 $accent2;
+                transition: box-shadow 300ms ease-in-out;
+            }
+        }
+    }
+
+    table, th, td {
+        border: 1px solid $accent1;
+    }
+
+    th {
+        background: darken($dark, 2.5%);
+    }
+
+    .gentree {
+        filter: invert(100%);
+        transition: filter 1s ease-in-out;
+    }
+}
+
+.black {
+    $bg-nav: $gradient-accent1-black-right;
+
+    background: $black;
+
+    pre {
+        box-shadow: 3px 3px $light;
+        border: none;
+    }
+
+    pre.src {
+        &::before {
+            background-color: $black;
+            color: $light;
+        }
+    }
+
+    .navbar, header {
+        background: $bg-nav;
+    }
+
+    .status {
+        background: $gradient-accent1-black-left;
+    }
+
+    .dropdown {
+        background: $dark;
+        color: $light;
+    }
+
+    #content {
+        a {
+            box-shadow: inset 0 -3px 0 $accent1;
+            transition: box-shadow 300ms ease-in-out;
+
+            &:hover {
+                box-shadow: inset 0 -23px 0 $accent1;
+                transition: box-shadow 300ms ease-in-out;
+            }
+        }
+    }
+
+    table, th, td {
+        border: 1px solid $light;
+    }
+
+    th {
+        background: lighten($black, 15%);
+    }
+}
+
+.nord {
+    $dark:                    #2e3440;
+    $black:                   #000000;
+    $accent1:                 #8fbcbb;
+    $accent2:                 #a3be8c;
+    $accent3:                 #ebcb8b;
+    $light:                   #eceff4;
+    $grey1:                   #e5e9f0;
+    $grey2:                   #d8dee9;
+    $grey3:                   #4c566a;
+    $grey4:                   #434c5e;
+    $grey5:                   #3b4252;
+    $grey6:                   #12181b;
+    $gradient-dark-to-light:  linear-gradient(to right, $grey3, $grey5);
+    // Accent 1
+    //   Black
+
+    $bg-nav: $gradient-dark-to-light;
+    $border-color: $dark;
+
+    color: $light;
+    background: $dark;
+
+    transition: background 500ms ease-in-out, color 1s ease-in-out;
+
+    pre {
+        box-shadow: 3px 3px $dark;
+        border: none;
+    }
+
+    pre.src {
+        &::before {
+            background-color: $dark;
+            color: $light;
+        }
+    }
+
+    .navbar, header {
+        background: $bg-nav;
+    }
+
+    .navbar svg {
+        fill: $light;
+    }
+
+    .status {
+        background: $gradient-dark-to-light;
+        color: $light;
+    }
+
+    .tooltip {
+        border-bottom: $tooltip-underline-size dotted $accent1;
+
+        .tooltiptext {
+            background-color: $accent1;
+            color: $light;
+
+            &::after {
+                border-color: $accent1 transparent transparent transparent;
+            }
+        }
+    }
+
+    .dropdown {
+        background: $grey3;
+        color: $light;
+    }
+
+    #content {
+        a {
+            box-shadow: inset 0 -3px 0 $accent1;
+            transition: box-shadow 300ms ease-in-out;
+
+            &:hover {
+                box-shadow: inset 0 -23px 0 $accent1;
+                transition: box-shadow 300ms ease-in-out;
+            }
+        }
+    }
+
+    table, th, td {
+        border: 1px solid $accent1;
+    }
+
+    th {
+        background: darken($dark, 2.5%);
+    }
+
+    .gentree {
+        filter: invert(100%);
+        transition: filter 1s ease-in-out;
+    }
+
+}
+
+#lightBtn {
+    background: $light;
+}
+
+#darkBtn {
+    background: $dark;
+}
+
+#nordBtn {
+    background: $nord;
+}
+
+#blackBtn {
+    background: $black;
+}
+
+pre.src {
+    background: $dark;
+    color: $light;
+}