diff --git a/docs/content/base/base.jinja2 b/docs/content/base/base.jinja2
index 780e37b2..3a4ca8fe 100644
--- a/docs/content/base/base.jinja2
+++ b/docs/content/base/base.jinja2
@@ -7,13 +7,13 @@
     <link href="https://bootswatch.com/5/darkly/bootstrap.min.css"
           crossorigin="anonymous" rel="stylesheet">
     {{ defer_css("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css") }}
-    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-            crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
     <script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <link rel="stylesheet" href="{{ 'styles/base.min.css'|static }}"/>
     {% block resources %} {% endblock %}
 </head>
-<body class="vh-100 d-flex flex-column" id="top" onload="{% block onLoad %}{% endblock %}">
+<body class="vh-100 d-flex flex-column" style="overflow-x: hidden;" id="top" onload="{% block onLoad %}{% endblock %}" {% if page.render_toc %}data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="65"{% endif %}>
 <header>
     <nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top mb-3">
         <div class="container-fluid">
@@ -57,20 +57,22 @@
         </div>
     </nav>
 </header>
-<main class="flex-grow-1">
-    <div class="container-lg">
-        {% block content %} {% endblock %}
-    </div>
-</main>
-<footer class="container-fluid w-100 mt-5 pt-4 pb-3 bg-dark">
-    <div class="row text-center">
-        <div class="col">
-            <p>Last Generated: {{ ''|gen_time }}</p>
+<div class="container-lg flex-grow-1">
+    <main class="main">
+        <div>
+            {% block content %} {% endblock %}
         </div>
-        <div class="col">
+    </main>
+</div>
+<footer class="container-fluid w-100 mt-5 pt-4 pb-3 bg-dark">
+    <div class="row gy-3 text-center">
+        <div class="col-md">
+            <p class="p-0 m-0">Last Generated: {{ ''|gen_time }}</p>
+        </div>
+        <div class="col-md">
             <a class="link-light" href="#top">Back To Top</a>
         </div>
-        <div class="col">
+        <div class="col-md">
             {{ external_link('Report An Issue', "https://github.com/xen-42/outer-wilds-new-horizons/issues/new/choose", 'link-light') }}
         </div>
     </div>
diff --git a/docs/content/base/meta.jinja2 b/docs/content/base/meta.jinja2
index 8ad04559..e7aaf22a 100644
--- a/docs/content/base/meta.jinja2
+++ b/docs/content/base/meta.jinja2
@@ -14,6 +14,7 @@
     {% set desc=page.description %}
 {% endif %}
 {% set img="images/home/home_logo.webp"|static|full_url %}
+{% set canonical=page.title|route|full_url %}
 {% set theme_color="#222222" %}
 
 {# Meta Info #}
@@ -23,14 +24,15 @@
 <title>{{ title }}</title>
 <meta name="keywords" content="New Horizons, Outer Wilds, Modding, C#, Unity" />
 <meta name="description" content="{{ desc }}"/>
+<link rel="canonical" href="{{ canonical }}">
 
 {# OpenGraph Info #}
 {{ og("type", "website") }}
 {{ og("title", title) }}
 {{ og("description", desc) }}
-{{ og("url", page.title|route|full_url) }}
+{{ og("url", canonical) }}
 {{ og("image", img) }}
-{{ og("image:alt", desc) }}
+{{ og("image:alt", "The New Horizons Logo") }}
 
 {# Twitter Info #}
 {{ tw("title", title) }}
diff --git a/docs/content/base/page_template.jinja2 b/docs/content/base/page_template.jinja2
index 4a427023..a93bd868 100644
--- a/docs/content/base/page_template.jinja2
+++ b/docs/content/base/page_template.jinja2
@@ -2,15 +2,44 @@
 
 {% from "base/macros.jinja2" import defer_css %}
 
+{% set br="lg" %}
+{% set col_num=3 %}
+
 {% block resources %}
     {{ defer_css("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/github-dark-dimmed.min.css") }}
-    <script onload="hljs.highlightAll();" defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
-    <style>code{background-color: #1a1a1a !important;}</style>
+    <script onload="hljs.highlightAll();" defer
+            src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
 {% endblock %}
 
 {% block content %}
-    <div class="row">
-        <div class="col">
+    <div class="row g-6">
+        {% if page.render_toc %}
+            <div class="col-{{ br }}-{{ col_num }}">
+                <nav id="TableOfContents"
+                     class="navbar navbar-light sticky-top flex-column align-items-stretch p-3 overflow-auto"
+                     style="max-height: 100vh !important;">
+                    {% macro render(item) %}
+                        <a id="{{ item['id'] }}-toc" class="nav-link toc-link px-1 mb-1" href="#{{ item['id'] }}"
+                           style="margin-left: {{ 0.7 * item['level'] }}rem;">{{ item['name'] }}</a>
+                        {% if item['children'] %}
+                            <nav class="nav nav-pills flex-column">
+                                {% for child in item['children'] %}
+                                    {{ render(child) }}
+                                {% endfor %}
+                            </nav>
+                        {% endif %}
+                    {% endmacro %}
+                    <nav class="nav nav-pills flex-column">
+                        <strong class="nav-text pb-2">On This Page</strong>
+                        {% for item in page.table_of_contents %}
+                            {{ render(item) }}
+                        {% endfor %}
+                    </nav>
+                </nav>
+            </div>
+            <hr class="d-{{ br }}-none mt-3"/>
+        {% endif %}
+        <div id="page-contents" {% if page.render_toc %}class="col-{{ br }}-{{ 12 - col_num }}"{% else %}class="col"{% endif %}>
             {{ rendered|safe }}
         </div>
     </div>
diff --git a/docs/content/base/schema/json/section_properties.jinja2 b/docs/content/base/schema/json/section_properties.jinja2
index 38224078..56fb851c 100644
--- a/docs/content/base/schema/json/section_properties.jinja2
+++ b/docs/content/base/schema/json/section_properties.jinja2
@@ -5,7 +5,7 @@
         <div class="accordion" id="accordion{{ html_id }}">
             <div class="accordion-item">
                 <h2 class="accordion-header" id="heading{{ html_id }}">
-                    <button class="accordion-button{% if not expanded %} collapsed{% endif %}" type="button"
+                    <button class="accordion-button collapsed" type="button"
                             data-bs-toggle="collapse"
                             data-bs-target="#{{ html_id }}"
                             aria-expanded="false" aria-controls="{{ html_id }}"
diff --git a/docs/content/pages/api.md b/docs/content/pages/api.md
index 47342a0c..bd5228ea 100644
--- a/docs/content/pages/api.md
+++ b/docs/content/pages/api.md
@@ -1,7 +1,7 @@
 Title: API
 Sort-Priority: 40
 
-## How to use New Horizons in Other Mods
+## How to use the API
 
 First create the following interface in your mod:
 
diff --git a/docs/content/pages/home.md b/docs/content/pages/home.md
index 4801344b..27c4ebdd 100644
--- a/docs/content/pages/home.md
+++ b/docs/content/pages/home.md
@@ -1,6 +1,6 @@
 Title: Home
 Out-File: index
-Sort-Priority: 200
+Sort-Priority: 100
 
 ![New Horizons Logo]({{ 'images/home/home_logo.webp'|static }})
 
@@ -8,7 +8,7 @@ Sort-Priority: 200
         
 This is the official documentation for [New Horizons](https://github.com/xen-42/outer-wilds-new-horizons){ target="_blank" }
 
-## Getting Started with Planet Creation
+## Getting Started
 
 The [Config Template](https://github.com/xen-42/ow-new-horizons-config-template){ target="_blank" } is available if you want to release your own
 planet mod using configs. You can learn how the configs work by picking apart
@@ -119,7 +119,7 @@ it).
 
 Check out the rest of the site for how to format planet, star system, dialogue, ship log, and translation files!
 
-## Helpful resources
+## Helpful Resources
 
 The texturemap/heightmap feature was inspired by the KSP mod Kopernicus. A lot of the same techniques that apply to
 planet creation there apply to New Horizons. If you need help with planetary texturing, check out [The KSP texturing guide](https://forum.kerbalspaceprogram.com/index.php?/topic/165285-planetary-texturing-guide-repository/){ target="_blank" }.
diff --git a/docs/content/pages/ship_log.md b/docs/content/pages/ship_log.md
index b86af4a3..e0cb9894 100644
--- a/docs/content/pages/ship_log.md
+++ b/docs/content/pages/ship_log.md
@@ -4,7 +4,7 @@ Sort-Priority: 70
 
 {% macro image(name) %}{{ ("images/ship_log/" + name)|static }}{% endmacro %}
 
-# Ship Log
+# Intro
 Welcome! this page outlines how to create a custom ship log.
 
 ## Helpful Mods
@@ -85,12 +85,10 @@ navigate to ShipLogManager.
     <Entry> <!-- An Entry For This Planet -->
         <ID>EXAMPLE_ENTRY</ID> <!-- The ID of this entry -->
         <Name>Example Planet</Name> <!-- The name to show for this entry both on the card and in map mode -->
-        <Curiosity>EXAMPLE_ENTRY
-        </Curiosity> <!-- The curiosity this entry belongs to (optional) in this case, it belongs to itself -->
+        <Curiosity>EXAMPLE_ENTRY</Curiosity> <!-- The curiosity this entry belongs to (optional) in this case, it belongs to itself -->
         <IsCuriosity/> <!-- Marks this entry as a curiosity, makes it bigger in rumor mode and allows custom colors -->
         <IgnoreMoreToExplore/> <!-- Don't show a "more to explore" icon -->
-        <AltPhotoCondition>EXAMPLE_EXPLORE_FACT
-        </AltPhotoCondition> <!-- Show an alternate picture if a fact is known -->
+        <AltPhotoCondition>EXAMPLE_EXPLORE_FACT</AltPhotoCondition> <!-- Show an alternate picture if a fact is known -->
 
         <RumorFact> <!-- A rumor fact that belongs to this entry -->
             <ID>EXAMPLE_RUMOR_FACT</ID> <!-- The ID of this fact -->
@@ -100,12 +98,10 @@ navigate to ShipLogManager.
 
         <ExploreFact> <!-- An explore fact that belongs to this entry -->
             <ID>EXAMPLE_EXPLORE_FACT</ID> <!-- The ID of this fact -->
-            <Text>Example Explore Fact
-                <![CDATA[<color=orange>This is orange</color>]]></Text> <!-- The Text to display for this fact, notice how you can use color just like in dialogue -->
+            <Text>Example Explore Fact <![CDATA[<color=orange>This is orange</color>]]></Text> <!-- The Text to display for this fact, notice how you can use color just like in dialogue -->
             <AltText> <!-- Text to display for this fact if another fact is known -->
                 <Text><![CDATA[<color=blue>Different Text To Display</color>]]></Text> <!-- The text to display -->
-                <Condition>EXAMPLE_CHILD_RUMOR_FACT
-                </Condition> <!-- The fact that needs to be known to make this text display -->
+                <Condition>EXAMPLE_CHILD_RUMOR_FACT</Condition> <!-- The fact that needs to be known to make this text display -->
             </AltText>
         </ExploreFact>
 
@@ -132,8 +128,7 @@ navigate to ShipLogManager.
         <ID>EXAMPLE_ENTRY_2</ID> <!-- Make sure IDs are unique! -->
         <Name>Example Entry 2</Name>
         <Curiosity>EXAMPLE_ENTRY</Curiosity> <!-- Set this entry's curiosity to the other one we defined -->
-        <IgnoreMoreToExploreCondition>EXAMPLE_EXPLORE_FACT_2
-        </IgnoreMoreToExploreCondition> <!-- Don't show a more to explore icon if a fact is known -->
+        <IgnoreMoreToExploreCondition>EXAMPLE_EXPLORE_FACT_2</IgnoreMoreToExploreCondition> <!-- Don't show a more to explore icon if a fact is known -->
 
         <!-- Make some facts for this second entry -->
         <RumorFact>
diff --git a/docs/content/pages/update_existing.md b/docs/content/pages/update_existing.md
index 8f0f7211..5da39ed3 100644
--- a/docs/content/pages/update_existing.md
+++ b/docs/content/pages/update_existing.md
@@ -1,7 +1,7 @@
 Title: Update Planets
 Sort-Priority: 80
 
-## How to Update Existing Planets
+## Update Existing Planets
 
 Similar to above, make a config where "Name" is the name of the planet. The name should be able to just match their in-game english names, however if you encounter any issues with that here are the in-code names for planets that are guaranteed to work: `SUN`, `CAVE_TWIN` (Ember Twin), `TOWER_TWIN` (Ash Twin), `TIMBER_HEARTH`, `BRITTLE_HOLLOW`, `GIANTS_DEEP`, `DARK_BRAMBLE`, `COMET` (Interloper), `WHITE_HOLE`, `WHITE_HOLE_TARGET` (Whitehole station I believe), `QUANTUM_MOON`, `ORBITAL_PROBE_CANNON`, `TIMBER_MOON` (Attlerock), `VOLCANIC_MOON` (Hollow's Lantern), `DREAMWORLD`, `MapSatellite`, `RINGWORLD` (the Stranger).
 
@@ -19,7 +19,7 @@ You can also delete parts of an existing planet. Here's part of an example confi
 
 In `childrenToDestroy` you list the relative paths for the children of the planet's gameObject that you want to delete.
 
-## How to Destroy Existing Planets
+## Destroy Existing Planets
 
 You do this (but with the appropriate name) as its own config.
 ```json
diff --git a/docs/content/static/scripts/schema.js b/docs/content/static/scripts/schema.js
index d5349a8d..9ff63884 100644
--- a/docs/content/static/scripts/schema.js
+++ b/docs/content/static/scripts/schema.js
@@ -1,32 +1,55 @@
-function flashElement(t) {
-    myElement = document.getElementById(t).parentNode, myElement.classList.add("jsfh-animated-property"), setTimeout(function () {
+$(document).on('click', 'a[href^="#"]', function (event) {
+    if (this.href.split("#")[1] === "top") return;
+    event.preventDefault();
+    history.pushState({}, '', this.href);
+});
+
+function flashElement(elementId) {
+    myElement = document.getElementById(elementId).parentNode;
+    myElement.classList.add("jsfh-animated-property");
+    setTimeout(function () {
         myElement.classList.remove("jsfh-animated-property");
-    }, 1e3);
+    }, 1000);
 }
 
-function setAnchor(t) {
-    history.pushState({}, "", t);
+function setAnchor(anchorLinkDestination) {
+    history.pushState({}, '', anchorLinkDestination);
 }
 
 function anchorOnLoad() {
-    let t = window.location.hash.split("?")[0].split("&")[0];
-    "#" === t[0] && (t = t.substr(1)), t.length > 0 && anchorLink(t);
+    let linkTarget = window.location.hash.split("?")[0].split("&")[0];
+    if (linkTarget[0] === "#") {
+        let idTarget = linkTarget.substring(1);
+        if (idTarget !== "top") {
+            anchorLink(idTarget);
+        }
+    }
 }
 
-function anchorLink(t) {
-    $("#" + t).parents().addBack().filter(".collapse:not(.show), .tab-pane, [role='tab']").each(function (t) {
-        if ($(this).hasClass("collapse")) $(this).collapse("show"); else if ($(this).hasClass("tab-pane")) {
-            const t = $("a[href='#" + $(this).attr("id") + "']");
-            t && t.tab("show");
-        } else "tab" === $(this).attr("role") && $(this).tab("show");
-    }), setTimeout(function () {
-        let e = document.getElementById(t);
-        e && (e.scrollIntoView({block: "center", behavior: "smooth"}), setTimeout(function () {
-            flashElement(t);
-        }, 500));
-    }, 1e3);
-}
+function anchorLink(linkTarget) {
+    const target = $("#" + linkTarget);
+    target.parents().addBack().filter(".collapse:not(.show), .tab-pane, [role='tab']").each(
+        function (index) {
+            if ($(this).hasClass("collapse")) {
+                $(this).collapse("show");
+            } else if ($(this).hasClass("tab-pane")) {
+                const tabToShow = $("a[href='#" + $(this).attr("id") + "']");
+                if (tabToShow) {
+                    tabToShow.tab("show");
+                }
+            } else if ($(this).attr("role") === "tab") {
+                $(this).tab("show");
+            }
+        }
+    );
 
-$(document).on("click", 'a[href^="#"]', function (t) {
-    t.preventDefault(), history.pushState({}, "", this.href);
-});
\ No newline at end of file
+    setTimeout(function () {
+        let targetElement = document.getElementById(linkTarget);
+        if (targetElement) {
+            targetElement.scrollIntoView({block: "center", behavior: "smooth"});
+            setTimeout(function () {
+                flashElement(linkTarget);
+            }, 500);
+        }
+    }, 1000);
+}
\ No newline at end of file
diff --git a/docs/content/static/styles/base.css b/docs/content/static/styles/base.css
new file mode 100644
index 00000000..374bfbdd
--- /dev/null
+++ b/docs/content/static/styles/base.css
@@ -0,0 +1,22 @@
+pre > code {
+    background-color: #1a1a1a !important;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bs-dark);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--bs-secondary);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
diff --git a/docs/lib/Content/AbstractTemplatedItem.py b/docs/lib/Content/AbstractTemplatedItem.py
index b72ee105..8350f53e 100644
--- a/docs/lib/Content/AbstractTemplatedItem.py
+++ b/docs/lib/Content/AbstractTemplatedItem.py
@@ -12,6 +12,8 @@ class AbstractTemplatedItem(MinifyMixin, AbstractItem, ABC):
     title: str = None
     description: str | None = None
     sort_priority: int = None
+    render_toc: bool = False
+    table_of_contents: dict = {}
 
     def load_metadata(self):
         if self.title is None:
@@ -40,7 +42,8 @@ class AbstractTemplatedItem(MinifyMixin, AbstractItem, ABC):
         template = self.env.get_template(str(self.in_path.relative_to(Path('content/')).as_posix()))
         context.update({
             'page': self,
-            'rendered': self.inner_render(template, **context)
+            'rendered': self.inner_render(template, **context),
+            'render_toc': self.render_toc
         })
         return container.render(**context)
 
diff --git a/docs/lib/Content/MDPage.py b/docs/lib/Content/MDPage.py
index 846c48c3..56e42c21 100644
--- a/docs/lib/Content/MDPage.py
+++ b/docs/lib/Content/MDPage.py
@@ -21,6 +21,9 @@ class MDPage(AbstractTemplatedItem):
 
         self.title = md.Meta.get('title')[0]
         self.description = md.Meta.get('description', [None])[0]
+        self.render_toc = md.Meta.get('toc', ['True'])[0].strip().lower() == "true"
+        if self.render_toc:
+            self.table_of_contents = md.toc_tokens
         raw_priority = md.Meta.get('sort-priority')
         if raw_priority is not None:
             self.sort_priority = int(raw_priority[0])
